[webpack] ch12. Vue.js CLI로 생성한 Webpack 설정파일 분석
Vue.js CLI로 생성한 Webpack 설정파일 분석
Vue 설치 및 Vue 프로젝트 생성
- npm을 통해 vue-cli 설치
npm install vue-cli -g
- vue 명령어를 통해 vue-webpack 프로젝트 생성
vue init webpack-simple
webpack.config.js 분석
path
와webpack
모듈 로드var path = require('path') var webpack = require('webpack')
entry
와output
을 통해 번들링 작업 시작module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, // ... }
module
부분이loader
설정하는 부분use
에 선언된 로더 적용 순서는 아래에서 위로 적용module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, // ... }
resolve
는 어떻게 그 해당 파일을 해석하는 지에 대한 옵션module.exports = { // ... resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, // ... }
devServer
는 webpack에서 제공하는 devServer에 대한 설정들을 나열historyApiFallback
: 클라이언트 사이드의 라우팅을 같이 쓸 수 있게 하는 것noInfo
: 빌드에 대한 정보를 처음에만 띄울 것인지overlay
: 웹팩에서 오류가 발생했을 때 브라우저화면에서 오류를 띄울 것인지module.exports = { // ... devServer: { historyApiFallback: true, noInfo: true, overlay: true }, // ... }
performance
의hints
는 webpack에서 빌드한 결과물이 250kb를 넘게 되면 경고메시지가 나오는데 그런 메시지들에 대한 설정module.exports = { // ... performance: { hints: false }, // ... }
devtool
은 개발자도구.sourcemap
과 같은 개발관련 도구들에 대한 설정module.exports = { // ... devtool: '#eval-source-map' }