背景
webpackの設定をproduction, development等に分けて管理したい場合、webpackのガイドにはwebpack.common.js, webpack.prod.js, webpack.dev.jsに分ける方法が書かれている。この方法では、常に編集対象以外のファイルの記述内容も意識する必要があり、管理も煩雑になりやすい。
そこで、webpack-config-utilsを導入して、一つのwebpack.config.jsにproductionとdevelopmentの両モードを定義をする。
概要
- webpack-config-utilsによって、webpack.config.js内で
ifProductionやifDevelopment等によるモード毎の値の切り替えが可能になる - モード定義の違いから発生する配列要素数による問題は
removeEmptyによって回避する -
production/developmentは
NODE_ENVで切り替える- 例:
$ NODE_ENV=production node run build
- 例:
webpackのconfigの基礎については参考URLを参照ください。
インストール
npmでlocalにインストール
$ npm install --save-dev webpack-config-utils
webpack.config.jsでの定義
webpack-config-utilsで定義されているifProduction, ifDevelopment等のAPIを使って、モード毎の定義を記述する
webpack.config.jsのサンプル
webpack.config.js
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { getIfUtils, removeEmpty } = require('webpack-config-utils')
const path = require('path')
const { ifProduction, ifDevelopment } = getIfUtils(process.env.NODE_ENV)
module.exports = {
mode: ifProduction('production', 'development'), // NODE_ENV=productionの時は'production'、それ以外では'development'が返る
entry: './src/index.js',
plugins: removeEmpty([ // 配列要素数による問題を回避（この例では不要）
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: ifProduction('Production', 'Development') // productionとそれ以外でtitleを切り替える
}),
ifDevelopment(new webpack.HotModuleReplacementPlugin())// developmentモードでは、HMRを有効にする
])
}
package.jsonでの定義
$ npm runから呼び出すスクリプトに、NODE_ENVを指定する。
サンプル
package.json
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "NODE_ENV=production webpack --config webpack.config.js"
},
実行
上記のサンプルでは、$ npm run startでdevelopmentモードでDevServerの起動、$ npm run buildでproductionモードでビルドが実行される。
$ npm run start
> package-name@1.0.0 start /path/to/project
> NODE_ENV=development webpack-dev-server
...
$ npm run build
> package-name@1.0.0 build:prod /path/to/project
> NODE_ENV=production webpack --config webpack.config.js
...