Make compatible with webpack-dev-server 4.0.0

[anark]

webpack-dev-server has a new beta release(4.0.0-beta.2) that features built in webpack 5 support.

Would be great to make webpacker 6.0 compatible with this as well
https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#400-beta0-2020-11-27

[vladimirtemnikov]

And it has much less dependencies ;)

[navidemad]

Is there any news about this issue :) ?

[jcoyne]

Yes, #3057 is one thing that has to be done. Another issue I ran into is that watchOptions (

webpacker/package/environments/development.js

Line 48 in 032c2d1

watchOptions: devServer.watch_options

) isn't supported in webpack-dev-server 4.

[clinejj]

Here's my config/webpack/development.js that I got working with webpack-dev-server 4.0rc0 that maps the current configuration onto the new configuration:

NOTE: updated Aug 2 to support weback-dev-server 4.0rc0

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

const webpackConfig = require('./base')

const devServerConfig = {
  client: {
    logging: webpackConfig.devServer.clientLogLevel,
    overlay: webpackConfig.devServer.overlay,
  },
  compress: webpackConfig.devServer.compress,
  devMiddleware: {
    publicPath: webpackConfig.devServer.publicPath,
  },
  hot: webpackConfig.devServer.injectHot,
  host: webpackConfig.devServer.host,
  port: webpackConfig.devServer.port,
  https: webpackConfig.devServer.https,
  hot: webpackConfig.devServer.hot,
  historyApiFallback: webpackConfig.devServer.historyApiFallback,
  headers: webpackConfig.devServer.headers,
  static: [
    {
      directory: webpackConfig.devServer.contentBase,
      watch: true,
    }
  ],
};
if (webpackConfig.devServer.quiet) {
  webpackConfig.infrastructureLogging.level = 'none';
}
if (webpackConfig.devServer.useLocalIp) {
  devServerConfig.host = 'local-ip';
}
if (webpackConfig.devServer.disableHostCheck) {
  devServerConfig.allowedHosts = 'all';
}
webpackConfig.stats = webpackConfig.devServer.stats;
webpackConfig.devServer = devServerConfig;

module.exports = webpackConfig;

It's a bit tricky to parse the changed configurations from the changelog for wds, but this should handle it. If you have custom pack paths or a more advanced configuration you may want to verify that everything is being set correctly.

[tagliala]

webpack-dev-server 4 entered the RC version stage

[anark]

Webpack Dev Server 4 has now been released as a stable 4.0.0 release. What needs to be done to make webpacker compatible with webpack-dev-server@4.0.0

When I upgrade webpack-dev-server to 4.0.0 when using webpacker@6.0.0.rc.1 I get the folloing error

- options has an unknown property 'watchOptions'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

[clinejj]

The patch I posted above still works if you want to upgrade sooner, but when I briefly looked into this earlier rails/webpacker would need to update the following for more official support:

• update this file to match the new configuration and options available in 4: https://github.com/rails/webpacker/blob/032c2d11a3758035305fe34e6795ab133128ee32/package/environments/development.js
• I think some of the methods in this class would need to be adjusted based on some of the changed/removed configurations:

  webpacker/lib/webpacker/dev_server.rb

  Line 1 in 032c2d1

  class Webpacker::DevServer

• the YML configuration would need to be updated with the new options as well:

  webpacker/lib/install/config/webpacker.yml

  Line 23 in 032c2d1

  dev_server:

I don't have enough of an understanding on how the YML configuration gets passed through to the JS but I think those are the three main files that handle it.

[PikachuEXE]

There is a JS config file that read the "default config" from a YAML file with default config
Then the same config file read from your project's config file and merge values

So to get rid of the unwanted options either the user need an extra statement to remove it or update the default config file from webpack-dev-server

[RSO]

Here's my config/webpack/development.js that I got working with webpack-dev-server 4.0rc0 that maps the current configuration onto the new configuration:

NOTE: updated Aug 2 to support weback-dev-server 4.0rc0

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

const webpackConfig = require('./base')

const devServerConfig = {
  client: {
    logging: webpackConfig.devServer.clientLogLevel,
    overlay: webpackConfig.devServer.overlay,
  },
  compress: webpackConfig.devServer.compress,
  devMiddleware: {
    publicPath: webpackConfig.devServer.publicPath,
  },
  hot: webpackConfig.devServer.injectHot,
  host: webpackConfig.devServer.host,
  port: webpackConfig.devServer.port,
  https: webpackConfig.devServer.https,
  hot: webpackConfig.devServer.hot,
  historyApiFallback: webpackConfig.devServer.historyApiFallback,
  headers: webpackConfig.devServer.headers,
  static: [
    {
      directory: webpackConfig.devServer.contentBase,
      watch: true,
    }
  ],
};
if (webpackConfig.devServer.quiet) {
  webpackConfig.infrastructureLogging.level = 'none';
}
if (webpackConfig.devServer.useLocalIp) {
  devServerConfig.host = 'local-ip';
}
if (webpackConfig.devServer.disableHostCheck) {
  devServerConfig.allowedHosts = 'all';
}
webpackConfig.stats = webpackConfig.devServer.stats;
webpackConfig.devServer = devServerConfig;

module.exports = webpackConfig;

It's a bit tricky to parse the changed configurations from the changelog for wds, but this should handle it. If you have custom pack paths or a more advanced configuration you may want to verify that everything is being set correctly.

Thanks for this! Just a small note for others trying this same snippet:

1. hot: is set twice in the devServerConfig variable
2. I changed watch: true to watch: webpackConfig.devServer.watchOptions so that it (hopefully) includes my ignores: /node_modules/ in there!

[anark]

Thanks @RSO,
Those changes do work for me when I try to run it(as long as I remove react-refresh but I'll tackle that later).

However It would be better if webpacker users didn't have to use a custom config to use the latest webpack-dev-server. I think #3122 seems like a reasonable solution. That way when upgrading to webpacker 6.0 you would also upgrade to dev-server 4.0

[PikachuEXE]

Agree with @anark
webpacker 6.0 stable release is not made yet and it's fine we include more breaking changes.
Just need the migration doc to catch up

[PikachuEXE]

For those who want to try out #3122 I posted a comment in that PR
about the method, the result and a potential issue for webpacker/webpack-dev-server v4

[dhh]

Solved via #3122.