带有 webpack DevServer 的多个 HtmlWebpackPlugins

Question

You can use multiple HtmlWebpackPlugin plugins to create more than one HTML file in production, but only one of the HTML files will be used by the DevServer. Is there any way to use all the HtmlWebpackPlugin plugins in development as well?

module.exports = {
  entry: {
    main: './src/main.js',
    anotherEntry: './src/anotherEntry.js'
  },
  // This only serves the index.html file on 404 responses
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    port: 3000,
  },
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/main.html',
      chunks: ['main'],
    }),
    new HtmlWebpackPlugin({
      filename: 'anotherEntry.html',
      template: './src/anotherEntry.html',
      chunks: ['anotherEntry'],
    }),
  ]
};

Answer 1

historyApiFallback can be given manual rewrites to control in a more fine-grained manner what the DevServer should fallback to on 404 responses. This way we can serve the other files in development as well.

module.exports = {
  entry: {
    main: './src/main.js',
    anotherEntry: './src/anotherEntry.js'
  },
  devServer: {
    contentBase: './dist',
    historyApiFallback: {
      rewrites: [
        { from: /^\/anotherEntry/, to: '/anotherEntry.html' },
        { to: '/index.html' },
      ],
    },
    port: 3000,
  },
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/main.html',
      chunks: ['main'],
    }),
    new HtmlWebpackPlugin({
      filename: 'anotherEntry.html',
      template: './src/anotherEntry.html',
      chunks: ['anotherEntry'],
    }),
  ]
};