Rails 5.1, webpack4, webpackerによるvue.jsの導入時にvue-loaderのcssに関するpluginがエラーを起こす対処

【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～を参考にrails+vue.jsの環境構築を行なっている際にエラーに悩まされ、特に解決方法が他に記載されていなかったので、投稿いたします。

エラー内容

事件は bin/webpackコマンドを入力した時に起きました。
参考先でも「エラーが出ます」と書いてあるが、エラー内容が異なる

[./app/javascript/app.vue] 558 bytes {hello_vue} [built] [failed] [1 error]
[./app/javascript/packs/application.js] 515 bytes {application} [built]
[./app/javascript/packs/hello_vue.js] 1.89 KiB {hello_vue} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {hello_vue} [built]
    + 4 hidden modules

ERROR in ./app/javascript/app.vue
Module build failed: Error: [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.
    at getCSSExtractLoader (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:124:15)
    at resolveLoaders (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:108:9)
    at createHelpers (/Users/userName/project/node_modules/vue-loader/lib/helpers.js:166:7)
    at Object.module.exports (/Users/userName/project/node_modules/vue-loader/lib/loader.js:72:7)
 @ ./app/javascript/packs/hello_vue.js 9:0-29 16:15-18

抽出

Module build failed: Error:
 [vue-loader] extractCSS: true requires extract-text-webpack-plugin as a peer dependency.

vue-loaderにおいて、extractCSSではなくextract-text-webpack-pluginを読み込んでねという内容。
バージョンアップにより変更された模様なので、vue.jsの公式レファレンスを参考に下記のように対応したところ解決。

解決方法

pluginインストールしておいて

npm i -D extract-text-webpack-plugin

ご希望通り、読み込ませる。あとは、webpack-dev-serverかproductionかの判定を組み合わせる。

config/webpack/loaders/vue.js

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
const ExtractTextPlugin = require("extract-text-webpack-plugin") <-該当のpluginを読み込ませる

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { ExtractTextPlugin } <-設定する
  }]
}