Webpacker config Rails 6 VueJS vue-loader 15.md

At the moment upgrading vue-loader causes some changes in how things are done. These are my config options for these items just to get it working.

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const coffee = require('./loaders/coffee')
const vue = require('./loaders/vue')

environment.loaders.append('vue', vue)
environment.loaders.append('coffee', coffee)

const VueLoaderPlugin = require('vue-loader/lib/plugin');
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
);

module.exports = environment

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

module.exports = { 
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS: extractCSS }
  },  
  {
    loader: 'rails-erb-loader',
    options: {
      runner: 'bin/rails runner',
      dependenciesRoot: '../app'
    }
  }]
}

config/webpack/loaders/coffee.js

module.exports = {
  test: /\.coffee(\.erb)?$/,
  use: [{
    loader: 'coffee-loader'
  }]
}

package.json

{
  "name": "Example",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.2",
    "bulma": "^0.7.5",
    "coffee-loader": "^0.9.0",
    "coffeescript": "^2.4.1",
    "rails-erb-loader": "^5.5.2",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.10",
    "vue-loader": "^15.7.0",
    "vue-resource": "^1.5.1",
    "vue-template-compiler": "^2.6.10",
    "vue-turbolinks": "^2.0.4"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.4.1"
  }
}