webpack-dev-server compiling very slow in rails app

Question

When I run

bin/webpack-dev-server

On a rails 5.1.7 application using react with react-rails gem, it can get stuck for more than 10-20 minutes with the message:

ℹ ｢wdm｣: wait until bundle finished: /packs/js/application-5bc097626fe492d88e56.js

My configuration is:

in erb.js

module.exports = {
  test: /\.erb$/,
  enforce: 'pre',
  exclude: /node_modules/,
  use: [{
    loader: 'rails-erb-loader',
    options: {
      runner: (/^win/.test(process.platform) ? 'ruby ' : '') + 'bin/rails runner'
    }
  }]
}

in development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

// Watch directories that often change the views.
// From: https://github.com/rails/webpacker/issues/1879#issuecomment-558397652
const chokidar = require('chokidar')
environment.config.devServer.before = (app, server) => {
  chokidar.watch([
    'config/locales/**/*.yml',
    'app/views/**/*.html.erb',
    'app/assets/**/*.scss'
  ]).on('change', () => server.sockWrite(server.sockets, 'content-changed'))
}

module.exports = environment.toWebpackConfig()

Answer 1

I think it's probably because of rails-erb-loader which normally can take more than 10 seconds on build.

Try install speed-measure-webpack-plugin, it will help you to see what each step will take.

const environment = require('./environment')

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap(environment.toWebpackConfig())

Answer 2

To speed up webpack-dev-server:

1. use javascript_packs_with_chunks_tag instead of javascript_pack_tag
2. add environment.splitChunks() to config/webpack/environment.js