webpackで使用するconfigファイルを指定(選択)する方法
本記事では、webpackで使用するconfigファイルを指定する
(選択する)方法を紹介していきます。
本記事の内容です。
webpackのconfigファイルを準備する
下記の通り、使用するwebpackのconfigファイルを複数準備します。開発用(webpack.config.development.js)
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // 下記の1行を追加する mode: 'development', // 下記の1行を追加する // 値はお好みで devtool: 'cheap-module-eval-source-map', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
本番用(webpack.config.production.js)
開発用configファイルのmodeをproductionに書き換えただけです。ビルド時に使用するconfigファイルを指定する
下記の通り、ビルド時にオプションで使用するconfigファイルを指定します。[使用するconfigファイルのファイル名]に、使用するconfigファイルの名前を入力します。
npx webpack --config [使用するconfigファイルのファイル名]
上述したそれぞれのファイルを指定する場合は、下記の通りとなります。
開発用configファイル(webpack.config.development.js)を使用してビルド
npx webpack --config webpack.config.development.js
本番用configファイル(webpack.config.production.js)を使用してビルド
npx webpack --config webpack.config.production.js