Reduce the output of the webpack-dev-server

[yvbeek]

The webpack-dev-server normally outputs a lot of information about how the packages are resolved. During development you are often only interested in the packages that webpack creates after building and the names and sizes of those packages.

After this pull request has been merged, you can always increase logging again by adding the following lines to your environment.js:

const { environment } = require('@rails/webpacker')

// Reduce the output of the Webpack Dev Server
environment.config.merge({
  devServer: {
    stats: {
      entrypoints: true,
      errorDetails: true,
      modules: true,
      moduleTrace: true
    }
  }
});

module.exports = environment

Or run webpack manually instead of the webpack-dev-server. But in my opinion the stats settings in this pull request are a better default.

[gauravtiwari]

thanks 👍

[jakeNiemiec]

As a developer, I wouldn't expect webpacker to suppress error details and stack traces by default (especially if that's not the default for vanilla webpack).

There even some issues asking for webpacker to be more verbose or complaining about a build hanging with no error message. #1824

[yvbeek]

@jakeNiemiec Perhaps it depends on the loaders that are used. In our project we are using TypeScript and if I keep the webpack-dev-server at the defaults it will output 132 lines.

A lot of it is things like:

Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/resolve-url-loader/index.js!node_modules/sass-loader/lib/loader.js??ref--6-4!app/frontend/packs/platform/visitor.scss:
    Entrypoint mini-css-extract-plugin = *
    [./app/frontend/images/background.jpg] 100 bytes {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./app/frontend/packs/platform/visitor.scss] ./node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--6-4!./app/frontend/packs/platform/visitor.scss 7.52 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/lib/css-base.js] 2.21 KiB {mini-css-extract-plugin} [built]
    [./node_modules/css-loader/lib/url/escape.js] 448 bytes {mini-css-extract-plugin} [built]

That doesn't provide any useful information for me for normal development. If I have a specific problem with a loader it could be useful, but otherwise it is just a lot of text.

The webpack-dev-server settings are injected in package/environments/development.js. It would be great if we could merge in dev_server: stats settings from the app's config/webpacker.yml.

This would probably work, but I'm not sure if it is the right way:

package/environments/development.js

    overlay: devServer.overlay,
    stats: {
      entrypoints: false,
      errorDetails: false,
      modules: false,
      moduleTrace: false,
      ...devServer.stats
    },
    watchOptions: devServer.watch_options

[ch-tactica]

@yvbeek I'm sorry, but I don't think this was a very good change. If you decide to increase the loaders in your own project and the default output becomes too verbose, that's something that is on you to deal with yourself.

Having this off by default hides very important compilation errors that are a pain for people who aren't as familiar with Webpacker/Webpack to track down.

[yvbeek]

I’m fine with reverting this change. Especially if it is causing issues for people who don’t use TypeScript in their projects.