Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

webpack

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

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

実際にどのように設定ファイルを分けるのか方法を説明していきます。

1つの設定ファイルでは

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

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の設定ファイルを分けたい場合は、環境ごとに設定ファイルを作成するとともに共通の設定ファイルを作成することで共通で使用したい設定をまとめておくことができます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした