ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

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