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

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

モチベーション

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

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

https://webpack.js.org/migrate/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