koba::blog

小林聡: プログラマです

webpack4 へのアップグレード

webpack

フロントエンド開発の環境構築 - koba::blog で開発環境を構築した当時は webpack3 が最新だったのですが、その後 webpack4 が出ているのでアップグレードしました。

webpack-cli のインストール

webpack4 からは webpack-cli のインストールも必要になったということなので、まずインストールします。

$ npm install -D webpack-cli

webpack のアップグレード

webpack4 にアップグレードします。package.jsondevDependencies: にある webpack のバージョンを最新版に変更します。

  "devDependencies": {

    "webpack": "^4.30.0",

  },

npm install でアップグレードします。

$ npm install

コマンドライン引数の変更

実はこれだけで対応完了なのですが、webpack4 で導入された新しい設定項目 mode: を使えと警告が出るので、コマンドライン引数で指定します。*1

ソースマップを出力する場合(デバッグ用ビルド)

$ webpack --mode development --devtool inline-source-map

圧縮する場合(リリース用ビルド)

$ webpack --mode production

これを package.jsonscripts: に反映しましょう。

  "scripts": {
    "build": "webpack --mode development --devtool inline-source-map",
    "release": "webpack --mode production",
  },

package.json の差分は以下の通りです。

*1:webpack.config.js で指定するように書かれているWebサイトもありますが、切り替えて使用する設定なのでコマンドライン引数で指定した方がいいです