PHP CI 환경에서 완전한 Vue 사용하기

/**
 * 진입용 index.js
 */
import Vue from 'vue'
import axios from 'axios'
import router from './router'
import App from './App.vue'

Vue.prototype.$http = axios

new Vue({
    el : '#app',
    router,
    components : { App },
    template : '<App/>'
});

'use strict'
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');

module.exports = {
    entry: { //string, object, array 가능 - 기본은 ./src
        app: path.join('[스크립트 파일 경로]', 'index.js') //진입점 스크립트 파일입니다.
    },
    output: {
        path: '[빌드된 js 목적지 경로]',
        publicPath: '[이미지등의 웹상 리소스 경로]',
        filename: './[name].[chunkhash].js', // 엔트리 파일명명규칙
        chunkFilename: '[id]_[chunkhash].js', // chunk파일 명명 규칙
        // --mode development에서는 [id]에도 chunkName들어갑니다.
    },
    //vue와 js, css 로드 규칙을 설정합니다.
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                include: [
                    /[Vue 소스 경로]/
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader?cacheDirectory',
                },
                include: [
                    /[Vue 소스 경로]/
                ]
            },
            {
                test: /\.css$/,
                oneOf: [
                    {
                        use: [
                            'vue-style-loader',
                            'css-loader'
                        ]
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            '@': '[Vue소스 경로]', // 편의상 소스단축경로를 설정합니다.
        },
        //파일 확장자 자동인식 임포트시 해당 확장자는 생략가능합니다.
        extensions: ['.js', '.vue', '.json'],
    },
    plugins: [
        // Vue 파일 로더
        new VueLoaderPlugin(),
        // html 자동 바인딩
        // 아래의 플러그인으로 인해 index.html에 해시네임으로 빌드된 index.js가 자동으로 매핑됩니다.
        new HtmlWebpackPlugin({
            // index.php에서 include할 파일이 생성될 경로와 파일명 입니다.
            filename: path.join('[View경로]', 'index.html'),
            // 자동으로 매핑할 진입점파일을 지정합니다.
            template: path.join('[Vue소스 경로]', 'index.html'),
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }),
    ],
    optimization: {
        //웹팩 4.x 버전에서 옵티마이즈 속성으로 추가된 CodeSplitting 기능입니다.
        splitChunks: {
            //initial - static파일만 분리, async - 동적로딩파일만 분리, all - 모두 분리
            chunks: 'async',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5, //병렬 요청 chunk수
            maxInitialRequests: 3, //초기 페이지로드 병렬 요청 chunk수
            automaticNameDelimiter: '_', //vendor, default등 prefix 구분문자 (default : '~')
            name: true, //development모드일때 파일에 청크이름 표시여부
            cacheGroups: {
                default: {
                    minChunks: 2, //2개 이상의 chunk
                    priority: -20,
                    reuseExistingChunk: true //minChunks이상에서 사용할경우 공통사용
                },
                //axios, vue 같은 공통 모듈은 vendor로 관리합니다.
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                }
            }
        }
    }
};

'use strict'
const merge = require('webpack-merge')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const baseWebpackConfig = require('./webpack.config')
const config = require('../config').dev //개발용설정

const devWebpackConfig = merge(baseWebpackConfig, {
    //mode는 chunk[id], 디버깅 코드 등에 영향을 줍니다. webpack 3.x 버전에서는 Env 속성을 통해 관리했다고 합니다.
    mode: 'development',
    plugins: [
        new BundleAnalyzerPlugin(), //번들 무게 분석기 제대로 스플릿 되었는지 확인할 때 사용합니다.
        new webpack.DefinePlugin({
            env : config.env
        }),
    ],
    watch: true, //코드의 변화를 감지해 자동으로 재빌드해주는 옵션입니다.
    cache: true, //캐시 사용을 활성화하면 변경사항이 있는 코드만 재빌드합니다.
    optimization: {
        //uglify 플러그인 코드 압축 여부를 설정합니다 압축 시 용량을 매우 줄일 수 있으나 빌드 속도가 크게 저하되므로 개발 시에는 꺼줍니다.
        minimize: false,
    }
})

module.exports = new Promise((resolve, reject) => {
    resolve(devWebpackConfig);
})

'use strict'
const merge = require('webpack-merge') // 설정파일 결합에 사용합니다.
const webpack = require('webpack')
const baseWebpackConfig = require('./webpack.config') //베이스 설정파일
const config = require('../config').prod //서비스용 설정

const prodWebpackConfig = merge(baseWebpackConfig, {
    mode: 'production', //chunk[id], 디버깅 코드등 영향 있음
    plugins: [
        new webpack.DefinePlugin({
            env : config.env
        }),
    ],
    //개발용과 반대로 용량은 줄이고 필요 없는 기능은 꺼줍니다.
    watch: false,
    cache: false,
    optimization: {
        minimize: true,
    }
})

module.exports = prodWebpackConfig

import './testComponent'

const testComponent = () => import('./testComponent')

const testComponent = () => import( /* webpackChunkName: '[청크이름]'*/ './testComponent')

import Vue from 'vue'
import Router from 'vue-router'

// 주석의 webpackChunkName = 코드 스플릿 chunk Name으로 사용됩니다.
// 꼭 컴포넌트와 청크 이름을 같게 설정할 필요는 없습니다.
const SalesAnalysisProduct = () => import(/* webpackChunkName: "salesAnalysisProduct" */ '[컴포넌트 파일 경로]')
const SalesAnalysisSeller = () => import(/* webpackChunkName: "salesAnalysisSeller" */ '[컴포넌트 파일 경로]')
const TrendAnalysisProduct = () => import(/* webpackChunkName: "trendAnalysisProduct" */  '[컴포넌트 파일 경로]')
const TrendAnalysisSeller = () => import(/* webpackChunkName: "trendAnalysisSeller" */  '[컴포넌트 파일 경로]')

Vue.use(Router)

const router = new Router({
    mode: 'history',
    routes: [
        /* 통계 */
        {
            path: '[CI컨트롤러 url]/salesAnalysisProduct',
            name: 'salesAnalysisProduct',
            component: SalesAnalysisProduct
        },
        {
            path: '[CI컨트롤러 url]/salesAnalysisSeller',
            name: 'salesAnalysisSeller',
            component: SalesAnalysisSeller
        },
        {
            path: '[CI컨트롤러 url]/trendAnalysisProduct',
            name: 'trendAnalysisProduct',
            component: TrendAnalysisProduct
        },
        {
            path: '[CI컨트롤러 url]/trendAnalysisSeller',
            name: 'trendAnalysisSeller',
            component: TrendAnalysisSeller
        },
    ]
})

// 아래의 함수로 전처리 후처리도 가능합니다!
router.beforeEach((to, from, next) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

export default router

import Vue from 'vue'
import Vuex from 'vuex'

// 각 도메인별 store들이 들어있는 modules 를 임포트해줍니다.
import * as modules from './modules/index'

Vue.use(Vuex)

export default new Vuex.Store({
    state : { },
    getter: { },
    mutations : { },
    actions : { },
    modules : modules.default
})

const files = require.context('.', false, /\.js$/)
const modules = {}

//자신(index.js)를 제외한 파일들을 파일이름을 Key로 modules에 담습니다.
files.keys().forEach((key) => {
    if (key === './index.js') return
    modules[key.toLowerCase().replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default modules

export default {
    namespaced : true, //해당 속성을 통해 파일명을 namespace로 사용합니다.
    state: { /* 상태값 및 데이터 */
        ...
    },
    getters: {
    },
    mutations: { /* state 변경처리 */
        ...
    },
    actions: { /* 통신처리 */
        ...
    }
}

import Vue from 'vue'
import Vue from 'axios'
import Cookies from 'js-cookie'

const TIMEOUT = '[타임아웃 시간(ms)]'

/*
    mixin의 기본 형태는 Vue 컴포넌트의 형태와 동일합니다.
    주로 전역 통신과 상태 관리는 vuex store에서,
    전역 data 속성과 전역 함수는 mixin에서 관리합니다.
*/
Vue.mixin({
    /* 전역 사용 data속성 선언 */
    data: () => {
        return {
            ... //이곳에 선언하는 data 속성은 전역에서 this로 접근 가능합니다.
        }
    },
    created: function() {
        // 공용 axios 객체 생성
        this.axios = axios.create({
            timeout: TIMEOUT,
            withCredentials: true,
            //공통해더는 여기에
            headers : { }
        });

        //axios 의 success와 error를 mixin method에서 처리 하도록 등록
        this.axios.interceptors.response.use(this.onSuccess, this.onError)
    },
    /* 전역 사용 함수 선언 */
    methods: {
        /* axios의 response handling 함수*/
        onSuccess : response => { },
        onError : function (error) { },

        /*GET, POST 등의 통신 함수, Toast(alert) 표출함수, 에러핸들링함수 등 선언*/

        /*... 내용이 너무 길어서 생략 ...*/
    }
});