Version 3.0.0 breaks webpack build

I just upgraded from 1.0.2 to 3.0.0 and now my webpack-dev-server build just hangs forever.

I downgraded to 2.1.0 and the problem has gone away.

Unfortunately I don’t have any logs to share.

My webpack config, for reference:

/* eslint-disable @typescript-eslint/no-var-requires */

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default;

module.exports = {
  entry: {
    main: './main.tsx',
  },
  output: {
    path: path.resolve(__dirname, 'bundle'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  devtool: 'source-map',
  mode: 'development',
  devServer: {
    port: 9001,
    host: '0.0.0.0',
    disableHostCheck: true,
    stats: 'minimal',
    overlay: {
      warnings: true,
      errors: true,
    },
    before(_, server) {
      setImmediate(() => {
        const qrcode = require('qrcode-terminal');
        const chalk = require('chalk');

        const hostname = require('os').hostname();

        const port = server.listeningApp.address().port;

        const localURL = `http://localhost:${port}`;
        const remoteURL = `http://${hostname}:${port}`;

        console.log();
        console.log(chalk.yellow('Ctrl + click here:'), chalk.underline.blue(localURL));
        console.log();
        console.log(chalk.yellow('On your phone:'), chalk.underline.blue(remoteURL));
        console.log();
        qrcode.generate(remoteURL);
        console.log();
      });
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Controller',
      meta: { viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no' },
    }),
    new FaviconsWebpackPlugin('./assets/robot.png'),
    new ErrorOverlayPlugin(),
    new WatchExternalFilesPlugin({
      files: ['../shared/**/*.ts'],
    }),
    // new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.less$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        // exclude: /node_modules/,
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000',
        // Need file-loader?
      },
    ],
  },
};

[jantimon]

Released the fix as 3.0.1 so at least will not hang without an error.
Thanks a lot for reporting.

Version 4.0 is still beta but already heavily used e.g. by facebooks create-react-app https://www.npmjs.com/package/html-webpack-plugin/v/4.0.0-beta.11

[jantimon]

html-webpack-plugin version 4.0 has been released https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d

The latest favicons-webpack-plugin provides a error message if the versions missmatch.