Vue.js アプリの webpack のバージョンを 4 系に上げた
会社で担当してる Vue.js のプロダクトの webpack のバージョンを 3.8.1 から 4.8.3 に上げた。
どこか1つのドキュメントやエントリを見ただけで完了するものでもなかったので、手順をまとめてみる。誰かの助けになったら嬉しいですね！
手順
- package.json の "webpack" を含むパッケージのバージョンを上げる
- 各環境の webpack の設定に mode プロパティを追加
- webpack-cli を devDependencies に追加
- UglifyJsPlugin の設定を消し optimization プロパティの minimize を設定
- *-loader パッケージのバージョンを上げる
- VueLoaderPlugin を plugins プロパティに追加
- .vue と .scss の loader 設定を分離する
各項目の詳細を書いていきます。
1. package.json の "webpack" を含むパッケージのバージョンを上げる
package.json のバージョン指定を雑に "*" にして yarn install した。
... ... - "webpack": "^3.8.1", - "webpack-dev-server": "^2.9.4", - "webpack-merge": "^4.1.1" + "webpack": "*", + "webpack-dev-server": "*", + "webpack-merge": "*" ... ...
2. 各環境の webpack の設定に mode プロパティを追加
webpack 4 から最適化の戦略を mode プロパティ、もしくは webpack コマンドに --mode オプションを付けて選択(development もしくは production)する必要がある。
設定ファイルに書くなら以下のような感じに。
module.exports = {
+ mode: "development",
...
3. webpack-cli を devDependencies に追加
cli コマンドを使うためには webpack-cli パッケージが必要になったので入れる。
$ yarn add -D webpack-cil
4. UglifyJsPlugin の設定を消し optimization プロパティの minimize を設定
webpack.optimize.UglifyJsPlugin は has been removed となり代わりに use config.optimization.minimize とのこと。
plugins: [ - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - }, - sourceMap: true, - parallel: true - }) - ] ... ... + optimization: { + minimize: true + }
5. *-loader パッケージのバージョンを上げる
ビルドしたところ一部のローダーでエラーが出たのでバージョンを上げる。手順 1. と同様にバージョンを "*" にして yarn install した。
6. VueLoaderPlugin を plugins プロパティに追加
vue-loader v15 からプラグインクラスのインスタンスを plugins プロパティに書く必要がある。(参考)
+const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { ... ... + plugins: [ + new VueLoaderPlugin() + ], ... ...
7. .vue と .scss の loader 設定を分離する
これも vue-loader v15 からの仕様で、.vue と SFC の中で使う CSS のメタ言語を別々の言語として webpack の設定を書くようになった。
これによって SFC のファイルに直接書いたコードと外部から import したコードに同一の設定を適用することができるようになった。
scss を使っている場合は以下のようになる。（というか、した。）
- { - test: /\.vue$/, - loader: 'vue-loader', - options: { - loaders: { - sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax', - scss: [ - 'vue-style-loader', - 'css-loader', - 'sass-loader', - { - loader: 'sass-resources-loader', - options: { - resources: path.resolve(__dirname, '../src/styles/_variables.scss') - } - } - ] - } - } - } + { + test: /\.vue$/, + use: [ + 'vue-loader' + ] + }, + { + test: /\.scss$/, + use: [ + 'vue-style-loader', + 'css-loader', + 'sass-loader', + { + loader: 'sass-resources-loader', + options: { + resources: path.resolve(__dirname, '../src/styles/_variables.scss') + } + } + ] + },
以上で各環境でビルドしたり webpack-dev-server で開発環境を動かしたりできるようになりました🎉
もし僕と同様に package.json のバージョン指定を * にした人はちゃんと新たなバージョンを入れるのをお忘れなく。
気になるパフォーマンスについては後に別途まとめようと思います。
