webpack 설정을, 개발용 설정, 배포용 설정으로 나누어 사용하기

보통 webpack의 사용을 처음 공부할때, webpack.config.js 하나의 파일을 사용하는 방법을 공부하게 된다.

하지만 실제 개발중에는, 개발용 설정과 빌드용 설정을 나누워서 사용해야하는 경우가 발생한다.

예를 들어서 개발용 설정은 webpack-dev-server 설정 및 uglify 설정을 빼고, 빌드용 설정은, uglify을 추가하고, webpack-dev-server는 빼는 등의 설정이다.

이와 같이 상황이나 필요에 따라 webpack의 설정을 나누어 사용하는 방법을 소개한다.

서로 다른 설정 파일 생성하기

사실 적용하는 방법은 매우 간단하다. 실제로 설정파일을 나누어서 작성하면 된다.

개발용 설정

// dev config, `webpack.config.dev.js`

const path = require('path');
const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',

    entry: [
        './assets/js/reactComponents/about.js'
    ],

    output: {
        path: path.join(__dirname + '/_site/assets/js/reactComponents/'),
        publicPath: '/assets/js/reactComponents/',
        filename: 'about.js'
    },

    plugins: [
        // webpack-dev-server enhancement plugins
        new webpack.HotModuleReplacementPlugin()
    ],

    devServer: {
        hot: true,
        port: 4000,
        contentBase: path.join(__dirname, '_site')
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: { presets: ['es2015', 'react'] }
                }],
            }
        ]
    }
};

배포용 설정

// prod config, `webpack.config.prod.js`

module.exports = {
    entry: './assets/js/reactComponents/about.js',

    output: {
        path: __dirname + '/_site/assets/js/reactComponents/',
        filename: 'about.js'
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false,
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
    ],

    module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        cacheDirectory: true,
                        presets: ['es2015', 'react']
                    }
                }
            ]
        }
};

서로 다른 설정 파일 사용하기

필요에 따라 구분된 설정파일을 사용해서 webpack이 구동되게 한다.

CLI로 common을 바로 입력하기

// dev 설정으로 webpack
$ webpack --config webpack.config.dev.js

// prod 설정으로 webpack
$ webpack --config webpack.config.prod.js

npm에 등록해서 사용

node에 npm을 사용하는 경우 더 간단하게 사용 가능하다.

특히 dev는 webpack-dev-server 을 사용하게 하고, prod는 webpack 을 사용 할 수 있다.

사실 딱히 특별한건 아니고, npm 의 script 을 사용 하는 형태이다.

package.json

  ...
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.prod.js"
  },
  ...

사용

// dev 설정으로 실행
$ npm run start

// prod 설정으로 실행
$ npm run build