如何用webpack生成几个html文件？

Question

我需要在构建后生成2个html文件，并在第一个html中仅包含.js包（没有头部，身体等），但在另一个.css包（没有头部，身体等）。我如何理解为了让htmlWebpackPlugin生成2个htmls我需要在webpack中指定如下的配置：

new HtmlWebpackPlugin({
            template: './templates/index1.html',
            filename: '/templates/template1.html',

        }),
        new HtmlWebpackPlugin({
            template: './templates/index2.html',
            filename: '/templates/template2.html',

        }), 

但是我怎样才能将它们分开呢？

Answer 1

您可以使用多个入口点来实现它。

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({
      chunks: ['page1'],
      filename: 'apps/page1/build/index.html'
    }),
    new HtmlWebpackPlugin({
      chunks: ['page2'],
      filename: 'apps/page2/build/index.html'
    })
  ]
};