실전 퀴즈 풀이

// exercise/webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    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: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}

// if (process.env.NODE_ENV === 'production') {
//   module.exports.devtool = '#source-map'
//   // http://vue-loader.vuejs.org/en/workflow/production.html
//   module.exports.plugins = (module.exports.plugins || []).concat([
//     new webpack.DefinePlugin({
//       'process.env': {
//         NODE_ENV: '"production"'
//       }
//     }),
//     new webpack.optimize.UglifyJsPlugin({
//       sourceMap: true,
//       compress: {
//         warnings: false
//       }
//     }),
//     new webpack.LoaderOptionsPlugin({
//       minimize: true
//     })
//   ])
// }

이 문제의 웹팩 설정 파일 중 주석처리 부분은 웹팩 3 버전일 때의 설정 파일이다.
웹팩 3 버전과 4 버전의 가장 큰 차이점은 mode 속성 유무이다.
이 문제 웹팩 설정파일에서는 원래 mode 속성이 없었는데 추가해놨다.

publicPath라는 것은 나중에 어떤 cdn 배포를 할 때, 그 cdn 주소에 포함될 수 있게끔 속성을 부여할 수 있는 것이라고 보면 된다.
publicPath는 cdn과 관련된 속성이기 때문에 한번 이거에 대한 속성을 찾아보는 것도 좋을 것이다.

loader 속성을 정의한 부분이다.
여러 가지 속성에 대해 정의가 된 것을 확인할 수 있다.

css 파일 인식을 위한 css-loader
vue 프레임워크와 관련이 있는 vue-style-loader

css-loader로 먼저 작업을 하고 그 후에 vue style loader 관련 작업을 했다 정도로만 이해하면 된다.

vue라는 확장 파일에 대해 vue-loader를 돌렸다.

js 파일에 대한 babel-loader 적용했다.
babel-loader는 js의 최신 문법들을 여러 브라우저가, 최대한 많은 브라우저가 호환할 수 있게끔 변환해주는 도구이다.
이런 식으로 바벨을 쉽게 추가해서 사용할 수 있기 때문에, 웹팩을 많이 사용하는 것이다.

exclude란?
프로젝트 내부에서 모든 js 파일들을 대상으로 babel-loader를 돌리는데, 그때 조심해야될 것은 node_modules/ 폴더는 라이브러리 관련 파일들이 들어가 있기 때문에 위 폴더 안에 있는 파일들까지 굳이 babel로 변환할 필요는 없다.
그래서 exclude 속성으로 배제하는 것이다.

이미지 속성에 대해서 file-loader를 활용해서 웹팩에서 인식할 수 있도록 하였다.

resolve는 한번도 말씀드린적이 없기 때문에 설명을 드리자면, resolve 라는 것은 웹팩으로 파일을 해석해 나갈 때,
그러니까 어떤 파일이 어떤 파일과 연관이 있는지 이런 식으로 파일간의 연관관계를 해석해 나갈 때,
그 파일의 해석 방식을 정의할 수 있는 속성이다.

alias라고 하는 것은 웹팩이 해석할 때 vue 내부적으로 vue$ 표시를 했을 때, 이 부분에 대해서 vue 폴더 밑에 있는 dist/vue.esm.js 파일을 연동을 시키겠다. 이렇게 보면 된다.
별칭 같은 거라고 이해하면 된다.
즉, 웹팩이 해석할 때 vue$ 표시는 vue/dist/vue.esm.js 파일로 해석하겠다? 연동시키겠다? 라고 생각하면 된다.
(이 부분은 더 알아보자.)

extensions라는 것은

import {} from './math.js';

이렇게 했을 때, extensions(확장자)에 명시되어있는 js / vue / json 은 생략해도 된다.

import {} from './math';

위와 같이 써도 된다는 뜻이다.

docs를 참고하자.

performance - 성능 관련된 힌트를 주는 속성이다.
이는 한번 찾아보면 될 것 같다.
그렇게 중요한 것은 아니다.

performance는 결과물의 사이즈가 초과가 되면.. 웹팩에서 제한하는 파일 사이즈 크기가 있는데, 해당 사이즈를 넘어가면 warning을 주는, 그런 식의 속성이라고 보면 된다.

소스맵 여러 가지 속성 중 하나를 명시한 것이다.
빌드된 파일과 빌드전 파일을 연결해준다.

이 부분을 보면서 웹팩 3 버전과 4 버전의 차이점에 대해서도 말해볼까 한다.

process.env.NODE_ENV : 노드 실행 변수라고 보면 된다.
process.env.NODE_ENV === ‘production’
노드 환경변수를 production으로 놨을 때,
즉 실행할 때,, 배포할 때 production이라고 설정을 해놨다면, (통상적으로 production을 많이 썼었음)
아래와 같은 특정 기능들을 더 추가하겠다. 라는 뜻이다.