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

webpackの設定をdevとproductionで分ける一例

More than 3 years have passed since last update.

webpackの設定を開発用と本番用で分けたいことがある。
例えば、SourceMapの有無とか種類を分けたい時や、uglifyするかしないかを切り替えたりなどが考えられる。

基本的には、webpackのproductionのドキュメントを見ればやり方は書いてあるが、やり方が幾つかあるので、自分のメモがてらその一例をここに書く。

webpackのバージョン

  • webpack: 3.4.1
  • webpack-dev-server: 2.6.1

要件

開発用

  • webpack-dev-serverでserveする
  • SourceMapを付ける
  • uglifyしない

本番用

  • bundle.jsをビルドする
  • SourceMapを付けない
  • uglifyする

webpackとしてはproductionでSourceMap使うと便利だよと言っているが、まぁそれはそれとして、こういう要件だったとする。

方針

webpack.config.jsは1つだけで環境変数で処理を分岐する。
設定の差分が大きい場合はconfigをmergeする方法を使うのがスッキリしそうだが、今回は大して差分はないので1つのconfigで済むようにした。

実装

package.json

{
    "name": "webpack-dev-prod",
    "version": "1.0.0",
    "scripts": {
        "webpack:dev": "webpack-dev-server",
        "webpack:prod": "NODE_ENV=production webpack -p"
    },
    "devDependencies": {
        "webpack": "^3.4.1",
        "webpack-dev-server": "^2.6.1"
    }
}

webpack.config.js

  • NODE_ENVで処理を分岐してSourceMapを設定する
const path = require("path");

module.exports = {
    entry: {
        index: ["./src/test.js"]
    },
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    }
};

if (process.env.NODE_ENV !== 'production') {
    module.exports.devtool = 'inline-source-map';
}

動作確認用コード

https://github.com/mwatanabe/webpack-dev-prod

smartround
スタートアップのファイナンスをサポートするSaaSを、スタートアップ・VC・士業の方に向け提供しています
https://jp.smartround.com/
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