UHD 4K READY? (webpack4)

[SamLebarbare]

on the road for webpack 4?

[glenjamin]

I haven’t had a chance to try it out yet.

Are there any issues?

[hubcarl]

Webpack 4 Error:

ERROR 71559 nodejs.unhandledExceptionError: Plugin could not be registered at 'compile'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'. at MultiCompiler.plugin (egg-vue-webpack-boilerplate/node_modules/webpack/node_modules/tapable/lib/Tapable.js:63:9) at MultiCompiler.deprecated [as plugin] (internal/util.js:52:15) at webpackHotMiddleware (egg-vue-webpack-boilerplate/node_modules/webpack-hot-middleware/middleware.js)

[koiski]

Just upgraded to webpack 4, no errors, but: Webpack-hot-middleware is using forever to build and update the browser to changes in the code. It uses the same amount of time as if I would just run "webpack" the normal way

[SamLebarbare]

Plugins should use Compiler.hooks.xxx.tap(, fn) now

So you must change:

compiler.plugin("compile", function() {
    latestStats = null;
    if (opts.log) opts.log("webpack building...");
    eventStream.publish({action: "building"});
  });
  compiler.plugin("done", function(statsResult) {
    // Keep hold of latest stats so they can be propagated to new clients
    latestStats = statsResult;
    publishStats("built", latestStats, eventStream, opts.log);
  });

compiler.hooks.compile.tap ("hot-middleware", function() {
    latestStats = null;
    if (opts.log) opts.log("webpack building...");
    eventStream.publish({action: "building"});
  });

[glenjamin]

Looks like there is a guide here: https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

Haven’t read it yet, but I want to maintain compatibility with <4 and >4 at the same time.

[SamLebarbare]

if (options.compiler.hooks) {
        options.compiler.hooks.done.tap('WebpackServe', done);
      } else {
        options.compiler.plugin('done', done);
      }

[glenjamin]

Looks good, will aim to update later today, unless someone beats me to it with a PR

[SamLebarbare]

Thx

[glenjamin]

I've just pushed ae79f6a to master which I've released as v2.21.1 onto npm.

This supports the old plugin API as well as the new one.

While testing this I seem to have uncovered a bug in build time reporting: https://github.com/webpack/webpack/issues/6625

This might be why other people above have been reporting build times being the same. Testing using the example/ folder in this repo seems to show hot reloading working correctly.

I'm going to leave this issue open for now in case other issues or reports emerge.

[glenjamin]

Oh, and you will still see a warning from webpack-dev-middleware until that gets upgraded.

Slightly annoyingly they've decided to go to v3 for the fix and break back-compat with older webpacks. Oh well.

[koiski]

I am still experiencing very slow update times when hot-loading, even after installing v2.21.2. Here is my config, Any idea why this is happening?

const path = require('path');
const webpack = require('webpack');

const config = {
  entry: {
    'app': [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?quiet=true',
      './client/app-client.jsx'
    ]
  },
  devtool: 'cheap-source-map',
  output: {
    path: path.join(__dirname, 'static/'), // Defines the root for all webpack-generated files to be the ./static folder
    filename: PROD ? './js/bundle.min.js' : './js/bundle.js', // When transpiling for production filename should be minified
    publicPath: '/static/',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      Components: path.resolve(__dirname, 'client/components'),
      Containers: path.resolve(__dirname, 'client/containers'),
      Constants: path.resolve(__dirname, 'client/constants.js'),
      Helpers: path.resolve(__dirname, 'client/helpers'),
      HOC: path.resolve(__dirname, 'client/HOC'),
      Stylesheets: path.resolve(__dirname, 'client/stylesheets'),
    }
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve('babel-loader'),
        options: {
          cacheDirectory: true,
          plugins: ['react-hot-loader/babel'],
        },
      },
      {
        test: /\.js$/,
        exclude: ['/node_modules/', '/server/'],
        loader: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 100000,
            },
          },
        ],
      },
    ],
  },
  externals: {
    React: 'react',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),        
  ]
};

module.exports = config;

[glenjamin]

If you use webpack --watch to do the building & rebuilding are the times the same?

What about if you comment out the references to webpack-hot-middleware?

If you still see the same timings then the issue is elsewhere i’m afraid.

[weixiaohuster]

i has the same question: the hot build(90s) takes almost as long as the first build(138s). @koiski , have you solved the problem?

[koiski]

@weixiaohuster I found a workaround using HardSourceWebpackPlugin.

[weixiaohuster]

good idea! @koiski I tried it, but it didn't work as well, the hot build time reduced from 90s to 60s. what about you?

[koiski]

Mine is down to about 5s now. Remember to check what source-map you are using when you are building in dev mode

[koiski]

optimization: { splitChunks: { cacheGroups: { default: true, } } }, and config.devtool = 'cheap-module-eval-source-map';

Helped to get my hot build time to 2s