webpack 3 から webpack 4 へアップデートする

Blog のテーマで使っている webpack を version 3 のまま放置していたので、version 4 へ アップデートしました。
実施したことを記載します。

前提

実行環境、webpack の version 情報を記載します。

• OS
  

  % sw_vers
  ProductName:    Mac OS X
  ProductVersion: 10.13.6
  BuildVersion:   17G65
  

• webpack の version
  

  % npm list --depth 0
  clean_blog_frontend@0.0.1
  ├── babel-core@6.26.0
  ├── babel-loader@7.1.2
  ├── babel-preset-es2015@6.24.1
  ├── babel-root-import@4.1.8
  ├── clean-webpack-plugin@0.1.18
  ├── css-loader@0.28.9
  ├── eslint@4.18.2
  ├── eslint-config-google@0.9.1
  ├── extract-text-webpack-plugin@3.0.2
  ├── file-loader@1.1.6
  ├── font-awesome@4.7.0
  ├── idb@2.0.4
  ├── jquery@2.1.1
  ├── npm@5.10.0
  ├── uglify-loader@2.0.0
  ├── url-loader@0.6.2
  ├── webpack@3.12.0
  ├── webpack-bundle-tracker@0.2.1
  ├── webpack-pwa-manifest@3.5.0
  ├── webpack-stats-plugin@0.2.1
  ├── webpack-subresource-integrity@1.1.0-rc.4
  ├── workbox-broadcast-cache-update@2.0.3
  ├── workbox-webpack-plugin@2.1.2
  └── zopfli-webpack-plugin@0.1.0
  

マイグレーションガイド

webpack 公式のマイグレーションガイドを読み、実施が必要なことを把握します。

• マイグレーションガイド
  To v4 from v3

• タスク
  マイグレーションガイドを読んだ結果、以下のような手順で進めようかと考えました。
  4. とりあえず、build してエラーに対処していく。 は plugin エラー等はドキュメント読むよりも場当たり的な対処していったほうが個人的に早そうに思ったためです。
  ガイドには、削除される plugin の記述もあるので、ドキュメントに従って削除してから作業してもよいかと思います。

  1. CLI のインストール
  2. package.json を webpack の verison を書き換える。
  3. npm update を実行。
  4. mode オプションの追加。
  5. とりあえず、build してエラーに対処していく。

マイグレーション作業

タスクに記載した内容に従い、作業を実施していきます。

1. CLI のインストール

v4 から、CLI が webpack から分離されて別パッケージになりました。 この CLI ツールからインストールします。

% npm install webpack-cli --save-dev
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.1.2
added 39 packages from 8 contributors in 17.649s

2. package.json を webpack の verison を書き換える。

package.json の webpack の version を書き換えます。

• 修正前
  

    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-es2015": "^6.24.1",
      "babel-root-import": "^4.1.8",
      "css-loader": "^0.28.9",
      "eslint": "^4.18.2",
      "eslint-config-google": "^0.9.1",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^1.1.6",
      "font-awesome": "^4.7.0",
      "uglify-loader": "^2.0.0",
      "url-loader": "^0.6.2",
      "webpack": "^3.12.0",
      "webpack-bundle-tracker": "^0.2.1",
      "webpack-cli": "^3.1.2",
      "webpack-pwa-manifest": "^3.5.0",
      "webpack-stats-plugin": "^0.2.1",
      "webpack-subresource-integrity": "^1.1.0-rc.4",
      "workbox-broadcast-cache-update": "^2.0.3",
      "workbox-webpack-plugin": "^2.1.2",
      "zopfli-webpack-plugin": "^0.1.0"
    },
  

• 修正後
  "webpack": "^4.26.0", に変更しました。
  

    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-es2015": "^6.24.1",
      "babel-root-import": "^4.1.8",
      "css-loader": "^0.28.9",
      "eslint": "^4.18.2",
      "eslint-config-google": "^0.9.1",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^1.1.6",
      "font-awesome": "^4.7.0",
      "uglify-loader": "^2.0.0",
      "url-loader": "^0.6.2",
      "webpack": "^4.26.0",
      "webpack-bundle-tracker": "^0.2.1",
      "webpack-cli": "^3.1.2",
      "webpack-pwa-manifest": "^3.5.0",
      "webpack-stats-plugin": "^0.2.1",
      "webpack-subresource-integrity": "^1.1.0-rc.4",
      "workbox-broadcast-cache-update": "^2.0.3",
      "workbox-webpack-plugin": "^2.1.2",
      "zopfli-webpack-plugin": "^0.1.0"
    },
  

3. npm update を実行。

npm update を実行します。
plugin の バージョンアップを求めているメッセージが表示されましたが、修正は後回しにして先に進めます。

WARN notice [SECURITY] jquery has the following vulnerability: 1 high. Go here for more details: https://nodesecurity.io/advisories?search=jquery&version=2.2.4 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN uglify-loader@2.0.0 requires a peer of uglify-js@^2.4.16 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN zopfli-webpack-plugin@0.1.0 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN file-loader@1.1.11 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-subresource-integrity@1.3.0 requires a peer of html-webpack-plugin@^2.21.0 || ~3 || >=4.0.0-alpha.2 <5 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-subresource-integrity@1.3.0 requires a peer of webpack@^1.12.11 || ~2 || ~3 || ~4 but none is installed. You must install peer dependencies yourself.
npm WARN babel-loader@7.1.5 requires a peer of webpack@2 || 3 || 4 but none is installed. You must install peer dependencies yourself.
npm WARN clean_blog_frontend@0.0.1 No repository field.    

4. mode オプションの追加。

webpack.config.js に、mode オプションを追加します。
これは、build 時のデフォルト動作かと思います。production または、development を指定でき、development を指定しました。

module.exports = {
    mode: 'development',

5. とりあえず、build してエラーに対処していく。

npm run-script build を実行し出力されるエラーに対処していきます。

sh: webpack: command not found

webpack のコマンドが、webpack-cli に移動したために発生しました。
package.json の scripts 内の記述を変更しました。

• 修正前
  

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "./node_modules/.bin/webpack --watch --progress --config webpack.config.js",
      "build": "./node_modules/.bin/webpack --config webpack.config.js",
      "eslint": "./node_modules/.bin/eslint"
    },
  

• 修正後
  

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "./node_modules/.bin/webpack-cli --watch --progress --config webpack.config.js",
      "build": "./node_modules/.bin/webpack-cli --config webpack.config.js",
      "eslint": "./node_modules/.bin/eslint"
    },
  

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

production モードだとデフォルトで minify されるようになり UglifyJsPlugin が削除されたため発生するエラーです。 webpack.config.json から、UglifyJsPlugin の記載を削除しました。

configuration.module has an unknown property ‘loaders’. These properties are valid:

v3 で loaders と記載している箇所を rules に置き換える必要があります。

    module: {
        rules: [
            {

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

extract-text-webpack-plugin を使っていると発生するエラーです。
webpack-contrib/extract-text-webpack-plugin: Extracts text from a bundle into a separate file に、webpack v4以降 は、代わりに mini-css-extract-plugin の使用を促す記載があります。

mini-css-extract-plugin のインストール

extract-text-webpack-plugin を削除し、mini-css-extract-plugin をインストールします。

• アンインストール、インストール
  

  npm install -D extract-text-webpack-plugin
  npm install --save-dev mini-css-extract-plugin
  

• webpack.config.js の修正
  plugin の変更にあわせて、webpack.config.js の修正を行います。

optimize-css-assets-webpack-plugin のインストール

mini-css-extract-plugin は CSS を minify する機能は持っていないようで、別途 optimize-css-assets-webpack-plugin をインストール設定する必要があります。
出力された css が minify されないので気がつきました。

npm install --save-dev optimize-css-assets-webpack-plugin

修正前と、修正後の package.json 、 webpack.config.js の 比較

以下、Github に commit した際の差分へのリンクです。

• package.json

• webpack.config.js

追記.別アプリで実施した際のエラーの記録

後日、別のアプリケーションでの Webpack の v3 から v4 への移行を実施しました。
同一の問題解決後にぶつかったエラーを記載します。

Module build failed (from ./node_modules/eslint-loader/index.js): TypeError: Cannot read property ‘eslint’ of undefined

以下に記載があります。

• Cannot read property ‘eslint’ of undefined · Issue #3 · Oxbug/issues

eslint-loader が古いため発生しているエラーになります。
plugin に LoaderOptionsPlugin を追加するか、eslint-loader を バージョンアップする必要があります。
package.json に以下を記載し、eslint-loader を バージョンアップしました。

"eslint-loader": "^2.0.0",

参考

アップデート時に参考にした記事になります。

• webpack4に更新した時にこけた所まとめ - Qiita
• webpack v3からv4へアップデートした時に発生したエラーと対応 - 文系プログラマによるTIPSブログ
• To v4 from v3
• webpack 3 から webpack 4 へアップデートする際にハマりそうなこと – rilakkuma3xjapan’s blog
• Webpack v3 → v4移行パッケージ対照表 - Qiita
• NMFR/optimize-css-assets-webpack-plugin: A Webpack plugin to optimize minimize CSS assets.

extract-text-webpack-plugin の マイグレーションが若干手間でしたが、無事移行できました。
以上です。