webpack1からwebpack3へバージョンアップ #JavaScript

保守できていなかったwebpackのバージョンをあげた際の記録です。
メモレベルで恐縮ですが、よかったら参考にしてください。

モチベーション

TypeScriptを導入したい(1だとts-loaderが対応していない)
ブラウザでのjs実行を速くしたい

なぜ2ではなく、3なの？

Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see the changelog for details.

となっていて、移行ガイドも
To v2 or v3 from v1
となっているから。

また、
https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

Migrating from webpack 2 to 3, should involve no effort beyond running the upgrade commands in your terminal. We marked this as a Major change because of internal breaking changes that could affect some plugins.

とも。

使用ライブラリ

Grunt
Webpack
Bower

移行手順

package.jsonの修正
bower対応
DedupePlugin,OccurenceOrderPlugin
grunt-webpackバージョンアップ
moduleDirectories
resolve
module
debug

移行手順詳細

package.jsonの修正

webpackの箇所のバージョンを修正

package.json

"webpack": "^3.12.0"

npm install

yarnの方はyarn installしてください

bower対応

bowerとは、公式で非推奨になっていますが、フロントエンド周りのパッケージマネージャーです。
将来的使わないようにしたいですが、今回はwebpackのバージョンアップに専念しています。

webpack.config.js

new webpack.ResolverPlugin(
  new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
)

上記はwebpackでbower管理のファイルを読み込む際のお作法のようなものです。

It was removed. There is now a option resolve.plugins. But for bower you don't need a plugin anymore, as the resolve options has been expanded.
See: https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

に書かれていますが、

webpack.config.js

descriptionFiles: ["package.json", "bower.json"]

をwebpack.config.jsのresolveに書いて対応しました。

参考

DedupePlugin,OccurenceOrderPlugin

OccurenceOrderPluginは、Webpack2でOccurrenceOrderPlugin（rが2つ）と改名されています（Issue）。
DedupeはWebpack2ではデフォルトの動作となったので、プラグインとしては不要です。

とのこと。

grunt-webpackバージョンアップ

ビルドすると以下のエラーがでました。

configuration has an unknown property 'failOnError'. These properties are valid:

こちらはバージョンアップで対応しました。

package.json

"grunt-webpack": "^3.1.3"

参考

moduleDirectories

ビルドすると以下のエラーがでました。

configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid

https://webpack.js.org/migrate/3/#resolveroot-resolvefallback-resolvemodulesdirectories
公式ガイドのresolve.modulesDirectoriesを参考に修正しました。

before

webpack.config.js

resolve: {
  root: path.resolve(__dirname, "../js/dirname/"),
  modulesDirectories: [
    path.resolve(__dirname, "node_modules"),
    path.resolve(__dirname, "bower_components")
  ]
},

after

webpack.config.js

resolve: {
  modules: [
    path.resolve(__dirname, "../js/dirname/"),
    path.resolve(__dirname, "node_modules"),
    path.resolve(__dirname, "bower_components")
  ],
  descriptionFiles: ["package.json", "bower.json"]
},

descriptionFilesは前述したbower対応です。
同様にresolveloaderでもmodulesDirectoriesを使用していたので、modulesにリネームしました。

module.loaders

https://webpack.js.org/migrate/3/#moduleloaders-is-now-modulerules
こちらに沿って変更しました。

https://webpack.js.org/migrate/3/#automatic--loader-module-name-extension-removed
また、ドキュメントにあるように

webpack.config.js

loader: "babel"

ようにサフィックスを省略してはいけなくなり

webpack.config.js

loader: "babel-loader

のようにしました。

debug

https://webpack.js.org/migrate/3/#debug
こちらに沿って変更しました。

before

webpack.config.js

  debug: true,

after

webpack.config.js

  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ]

参考

公式移行ガイド

他にも

https://qiita.com/uggds/items/2ee337c5843aae28a34a
https://blog.hiroppy.me/entry/2017/02/03/212817