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 : '' }); 

'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) 표출함수, 에러핸들링함수 등 선언*/           /*... 내용이 너무 길어서 생략 ...*/     } });