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ファイルを指定してビルドを実行します。