保守できていなかった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の箇所のバージョンを修正
"webpack":"^3.12.0"npm installyarnの方はyarn installしてください
bower対応
bowerとは、公式で非推奨になっていますが、フロントエンド周りのパッケージマネージャーです。
将来的使わないようにしたいですが、今回はwebpackのバージョンアップに専念しています。
newwebpack.ResolverPlugin(newwebpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json",["main"]))上記はwebpackでbower管理のファイルを読み込む際のお作法のようなものです。
https://github.com/webpack/webpack/issues/2324
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
に書かれていますが、
descriptionFiles:["package.json","bower.json"]をwebpack.config.jsのresolveに書いて対応しました。
参考
http://js.studio-kingdom.com/webpack/getting_started/using_plugins
DedupePlugin,OccurenceOrderPlugin
https://teratail.com/questions/93933
OccurenceOrderPluginは、Webpack2でOccurrenceOrderPlugin（rが2つ）と改名されています（Issue）。
DedupeはWebpack2ではデフォルトの動作となったので、プラグインとしては不要です。
とのこと。
grunt-webpackバージョンアップ
ビルドすると以下のエラーがでました。
configuration has an unknown property 'failOnError'. These properties are valid:
こちらはバージョンアップで対応しました。
"grunt-webpack":"^3.1.3"参考
https://github.com/webpack-contrib/grunt-webpack/issues/81
moduleDirectories
ビルドすると以下のエラーがでました。
configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid
https://webpack.js.org/migrate/3/#resolveroot-resolvefallback-resolvemodulesdirectories
公式ガイドのresolve.modulesDirectoriesを参考に修正しました。
before
resolve:{root:path.resolve(__dirname,"../js/dirname/"),modulesDirectories:[path.resolve(__dirname,"node_modules"),path.resolve(__dirname,"bower_components")]},after
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
また、ドキュメントにあるように
loader:"babel"ようにサフィックスを省略してはいけなくなり
loader:"babel-loader
のようにしました。
debug
https://webpack.js.org/migrate/3/#debug
こちらに沿って変更しました。
before
debug:true,after
plugins:[newwebpack.LoaderOptionsPlugin({debug:true})]参考
公式移行ガイド
https://webpack.js.org/migrate/3/#moduleloaders-is-now-modulerules
他にも
https://qiita.com/uggds/items/2ee337c5843aae28a34a
https://blog.hiroppy.me/entry/2017/02/03/212817