webpackの設定ファイルを環境ごとに分けるには

　webpackの設定を開発環境や本番環境ごとで分けて設定ファイルを作る方法について、作成の際に参考資料が少なかったので、自分で行った方法を共有します。誰かのお役に立てば幸いです。

webpack

　webpackはひとことで言えば、複数のjsファイルやcssファイルを1つのファイルにまとめてくれるビルドツールです。

設定ファイルを分ける方法

実際にどのように設定ファイルを分けるのか方法を説明していきます。
##1つの設定ファイルでは
　通常では1つの設定ファイルwebpack.config.jsを作成すると思いますが、
環境ごとに異なる設定をしたい場合１つのファイルだと以下のように環境で条件分岐が必要になってきます。

webpack.config.js

 
var destPath = 'dist/';

if (process.env.NODE_ENV === 'production') {
    destPath = 'hoge/';
}

const config = {
    entry: ['./src/index.js'],
    output: {
        path: path.resolve(destPath),
        filename: 'bundle.js',
    },

... 省略

}
module.exports = config;

環境ごとに設定ファイルをもたせる

　そこで、環境ごとに設定ファイルを分けてすっきりさせます。
共通でもたせたい設定もあるのでベースとなる設定ファイルと環境ごとに設定ファイルを作成します。
今回は開発環境と本番環境の設定ファイルをそれぞれもたせます。

共通の設定ファイル作成

共通として使いたい設定をここに記述します

webpack.config.base.js

const path = require('path');
const webpack = require('webpack');
const FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');
require('dotenv').config();

const config = {
    entry: ['./src/index.js'],
    output: {
        path: path.resolve('dist/'),
        filename: 'bundle.js',
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
            },
        ],
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                loaders: ['style', 'css?modules'],
            },
            {
                test: /\.json$/,
                loader: 'json',
            },
        ],
    },
    eslint: {
        configFile: './.eslintrc.yaml',
        fix: true,
    },
    plugins: [

    ],
};

module.exports = config;

開発環境用設定ファイル作成

開発環境でのみ設定したいことを記述します。
ポイントは先ほど作成した共通の設定ファイルを読み込んで、一緒にmergeさせます。
mergeにはwebpac-mergeというパッケージを使用しています。
https://www.npmjs.com/package/webpack-merge

webpack.config.development.js

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

const config = merge(baseConfig, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: 'dist',
        port: 0000,
        host: '0.0.0.0',
        inline: true,
    },
});

module.exports = config;

実行は下記でできます。

webpack --config webpack.config.development.js

本番環境用設定ファイル作成

本番環境用も開発環境用と同じように作成します。

webpack.config.production.js

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

const config = merge(baseConfig, {
    output: {
        path: path.resolve('hoge/'),
        filename: 'bundle.js',
    },
    eslint: {
        configFile: './.eslintrc.yaml',
        fix: false,
    },
});

module.exports = config;

実行は下記でできます。

webpack --config webpack.config.production.js

まとめ

複数の環境ごとにwebpackの設定ファイルを分けたい場合は、環境ごとに設定ファイルを作成するとともに共通の設定ファイルを作成することで共通で使用したい設定をまとめておくことができます。