webpack入門_設定をマージしてみる

webpackの公式ドキュメントを試してwebpack.config.jsのマージを確認してみたいと思います。
開発時とビルド時でwebpackの設定は以下の方針に差が出ます。

□開発時
　- 強力なソースマップ
　- hot module reload

□ビルド時
　- ロード時間短縮
　　- バンドルのminify
　　- 軽量なソースマップ
　　- ロード時間短縮のためのasset最適化

開発用の設定とビルド時の設定で分けてしまうと共通の設定を二重で管理しなければいけなくなるので、3つの設定(共通設定、開発時設定、ビルド時設定)に分けてwebpack-mergeを使って設定をマージして利用したいと思います。

webpack-mergeは以下のコマンドでインストールします。

npm install --save-dev webpack-merge

それでは以下3つの設定ファイルを作成します。

webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Production'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

webpack.dev.js

const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    })
  ]
});

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});

webpack.dev.jsとwebpack.prod.js共に共通の設定を読み込んだ後webpack-mergeを使って個別の設定とマージさせてmodule.exportsに代入している。
webpack.prod.jsにてprocess.env.NODE_ENVにproductionを指定しているが、未指定でもproductionになっているのでmodeの値が入っているように見える。

開発時はwebpack.dev.jsを、ビルド時はwebpack.prod.jsを指定するのでpackage.jsonのscriptsを以下のように修正する。

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

それから、現在のモードはprocess.env.NODE_ENVに入っているので以下のコードをindex.jsなどに追加すると確認できる。

console.log('current mode is ' + process.env.NODE_ENV);