LoginSignup
9

More than 3 years have passed since last update.

Webpacker 3 → 4

Last updated at Posted at 2019-07-01

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.jspostcss.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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9