今回は、webpackで本番環境と開発環境の設定ファイルを分ける方法について解説します。
1つのファイルで条件分岐を利用すれば、本番環境と開発環境の設定を分けることも可能ですが可読性が低く、今後のカスタマイズがやりづらいです。そんな時は、設定ファイルを本番用と開発用で分けて管理しましょう。
目次
webpack-mergeの使い方
webpackの設定ファイルを分けるには、webpack-mergeを使います。
厳密には、webpack-mergeは複数の設定ファイルを1つにマージするために利用します。この機能を使い、「共通設定ファイル + 本番環境用ファイル」「共通設定ファイル + 開発環境用ファイル」のように組み合わせファイルを別々に管理します。
WEB助webpack-mergeの使い方をSTEPごとに見ていきましょう！
STEP
webpack-mergeのインストール
まず始めに、webpack-mergeをインストールします。
npm i -D webpack-mergeSTEP
設定ファイルの作成
共通設定ファイル・本番環境用ファイル・開発環境用ファイルの3つを作成します。
ファイル名は、以下のとおりです。
- 共通設定ファイル：webpack.common.js
- 本番環境用ファイル：webpack.prod.js
- 開発環境用ファイル：webpack.dev.js
STEP
設定ファイルの記述
STEP2で作成した3つのファイルに処理を記述していきます。
まず始めに共通ファイルですが、このファイルでは本番環境用と開発環境用の両方で使用するオプション・ローダー・プラグインを指定します。
module.exports = {
entry: './src/index.js'
}ここから、この記事で最も重要なwebpack-mergeの登場です。
const { merge } = require('webpack-merge'); // ポイント①
const commonConfig = require('./webpack.common.js'); // ポイント②
module.exports = merge(commonConfig, { // ポイント③
mode: 'production',
});const { merge } = require('webpack-merge'); // ポイント①
const commonConfig = require('./webpack.common.js'); // ポイント②
module.exports = merge(commonConfig, { // ポイント③
mode: 'development',
devtool: 'source-map',
});ポイント解説
- webpack-mergeのmerge関数を取得
- 共通設定ファイル（webpack.common.js）を取得
- merge関数の第一引数に、ポイント②で取得した共通設定ファイルを指定。第二引数に環境固有の設定を記述
STEP
webpackの実行
各環境用のwebpack設定ファイルを作成した後、それぞれの環境でwebpackを実行します。
–configの後に、実行するファイル名を指定します。
# 本番環境
npx webpack --config webpack.prod.js
# 開発環境
npx webpack --config webpack.dev.jsコマンドの入力が毎回面倒な人は、package.jsonファイルのscriptに設定を追加します。
{
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack --config webpack.dev.js"
}
}package.jsonファイルに上記設定を追加した場合は、以下のコマンドでwebpackを実行することができます。
# 本番環境
npm run build
# 開発環境
npm run dev