Rails5.2で使っている webpacker
を3系から4系にアップデートしようとしたところ、ほとんどデフォルト環境で使っているにも関わらずいくつか作業が必要だったのでメモしておきます。
Gemfile
まずgemのバージョンを上げます。2019/7/1現在だと4.0.7が最新でした。
gem 'webpacker', '~> 4.0'
$ bundle install
Webpackerを再インストール
環境を綺麗にするため、一度インストールし直します。
色々聞かれますが、全部上書きしちゃいます。
$ bundle exec rails webpacker:install
Vueも入れ直します。
$ bundle exec rails webpacker:install:vue
設定ファイル変更
- .babelrc
- .postcssrc.yml
これらのファイルはそれぞれ babel.config.js
と postcss.config.js
に置き換えられたようなので削除します。
$ rm .babelrc .postcssrc.yml
Pug
テンプレートエンジンとしてPugを使っていたんですが、webpackのloaderが置き換わったようなので対応します。
$ yarn remove pug-loader
$ yarn add pug-plain-loader
config/webpack/loaders/pug.js
module.exports = {
test: /\.pug$/,
use: [{
loader: 'pug-plain-loader'
}]
}
config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const pug = require('./loaders/pug')
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.loaders.prepend('pug', pug)
module.exports = environment
動作確認
$ bin/webpack