フロントエンド開発の環境構築 - koba::blog で開発環境を構築した当時は webpack3 が最新だったのですが、その後 webpack4 が出ているのでアップグレードしました。
webpack-cli のインストール
webpack4 からは webpack-cli のインストールも必要になったということなので、まずインストールします。
$ npm install -D webpack-cli
webpack のアップグレード
webpack4 にアップグレードします。package.json
の devDependencies:
にある webpack のバージョンを最新版に変更します。
"devDependencies": { "webpack": "^4.30.0", },
npm install
でアップグレードします。
$ npm install
コマンドライン引数の変更
実はこれだけで対応完了なのですが、webpack4 で導入された新しい設定項目 mode:
を使えと警告が出るので、コマンドライン引数で指定します。*1
ソースマップを出力する場合(デバッグ用ビルド)
$ webpack --mode development --devtool inline-source-map
圧縮する場合(リリース用ビルド)
$ webpack --mode production
これを package.json
のscripts:
に反映しましょう。
"scripts": { "build": "webpack --mode development --devtool inline-source-map", "release": "webpack --mode production", },
package.json
の差分は以下の通りです。