webpackでHTML複数出力

webpackMultiHtml.md

Webpackで複数のHTMLを出力する。

webpackで複数のHTMLを出力したい。

参考:

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

Multiple entry points -> multiple html outputs? · Issue #218 · jantimon/html-webpack-plugin

1. エントリーポイント(JS)が一つの場合

HtmlWebpackPluginの設定を増やす。

参考先より

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      template: 'src/assets/test.html'
      filename: 'test.html',
    })
  ]
}

2. エントリーポイントが複数の場合

entryに、エントリーポイント毎にchankネームを付ける。
HtmlWebpackPluginの設定で、HTMLに載せたいchankを指定する。

参考先より：

module.exports = {
  entry: {
    'page1': './apps/page1/scripts/main.js',
    'page2': './apps/page2/src/main.js'
  },
  output: {
    path: __dirname,
    filename: "apps/[name]/build/bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page1'],
      filename: 'apps/page1/build/index.html'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page2'],
      filename: 'apps/page2/build/index.html'
    })
  ]
};