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 のバージョン指定を * にした人はちゃんと新たなバージョンを入れるのをお忘れなく。
気になるパフォーマンスについては後に別途まとめようと思います。
参考
vim-go で補完が動かなくなったときの対処法
先日から Vim で Go を書いているときに autocomplete できなくなって困っていた。同様のことが過去に何度かあったので対処法をメモしておく。
この記事を書く時点での手元の Vim は 8.0.1800、Go 関係の Vim プラグインは fatih/vim-go のみ。
1. gocode close する
2. go get -u github.com/nsf/gocode する
これだけで解決した。
gocode close は補完に利用される gocode のデーモンプロセスを殺すためのコマンドで、もしかしたらこれだけでも解消していたのかもしれない。
気になって確認してみたのだけど、go get -u github.com/nsf/gocode したり Vim から :GoUpdateBinaries してもデーモンプロセスは死なないようだった。
起動は Vim 上で補完が行われるタイミング（例えば `fmt.` のドットを入力したタイミング）で自動的に、かつ非常に短時間に行われるので、定期的にデーモンプロセスを殺す設定を入れておくと良いのかもしれない。
