webpackでconfigファイルの共通部を外部ファイルへ切り出す

本記事では、webpackでconfigファイルの共通部を
外部ファイルへ切り出して管理、使用する方法を紹介していきます。

本記事の内容です。

webpack-mergeをインストール

webpack-mergeを使用するので、下記コマンドを実行し、インストールします。
ライセンスはMITです。

npm i webpack-merge

configファイルの共通部を別途ファイル化

今回は、webpack.config.base.jsという名前で共通部分をファイル化します。
内容は下記の通りです。

webpack.config.base.js

const config = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./js/index.js`,
  
    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
}

module.exports = config;

各環境毎のconfigファイルで共通configファイルを読み込む

それぞれ、開発用(webpack.config.development.js)と
本番用(webpack.config.production.js)のファイル内で
共通のconfigファイル(webpack.config.base.js)を読み込み、
共通以外の部分をそれぞれ設定します。

内容は下記の通りです。

開発用configファイル(webpack.config.development.js)

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
  // 開発モードに設定
  mode: 'development',

  // 使用するソースマップの開発ツールを設定
  devtool: 'cheap-module-eval-source-map'
});

module.exports = config;

本番用configファイル(webpack.config.production.js)

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
  // 本番モードに設定
  mode: 'production'
});

module.exports = config;

後は、過去の
j-levia.hatenablog.jp
で紹介した通り、それぞれのconfigファイルを指定してビルドを実行します。

参考にしたWebサイト

qiita.com