webpackでhtmlとfaviconも一緒にbundleする

概要

html-webpack-pluginというプラグインを使います。 まずプラグインを追加
$ npm install html-webpack-plugin --save--dev

webpack.config.jsに追加

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      favicon: './src/favicon.ico',
    }),
  ],

追加するとこんな感じです。

module.exports = {
  mode: 'production',
  output: {
    filename: '[name].[chunkhash].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      favicon: './src/favicon.ico',
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: false,
    },
    runtimeChunk: true,
  },
};