使用 Webpack 循环 HTMLWebpackPlugin 的干净方法？

Question

我将 Webpack 4 与 HTMLWebPackPlugin 一起使用。我目前正处于处理近 30 个不同页面的地步，而且还有更多的向前发展。这是我在代码中的示例...

        new HTMLWebpackPlugin({
            template: './src/game11/index.html',
            mViewPort: 'width=device-width, initial-scale=1.0',
            favicon: './src/game11/media/favicon-16x16.png',
            title: 'Game 11 Training',
            filename: 'game11.htm',
            chunks: ['game11']
        }),
        new HTMLWebpackPlugin({
            template: './src/game12/index.html',
            mViewPort: 'width=device-width, initial-scale=1.0',
            favicon: './src/game12/media/favicon-16x16.png',
            title: 'Game 12 Training',
            filename: 'game12.htm',
            chunks: ['game12']
        }),

到目前为止，我的 webpack.config.js 文件中有 30 个。但我更愿意做这样的事情......

 ['game11','game12','something-else','etc'].forEach((event) => {
       new HtmlWebpackPlugin({
           template: './src/${event}/index.html',
           mViewPort: 'width=device-width, initial-scale=1.0',
           favicon: './src/${event}/media/favicon-16x16.png',
           title: '${event} Training',
           filename: '${event}.htm',
           chunks: ['${event}']
       }),
   }),

上面的代码不起作用，它只是一个草图。但是，今天是否可以在不添加额外插件或修改输出的情况下做类似的事情？我只是想添加数组值，它本身会创建一个新实例。

非常感谢！

Answer 1

按照您在问题中建议的相同逻辑，您可以使用 map 而不是 forEach 来构建插件数组，如下所示：

webpack.config.js

{
  plugins: [
    new MiniCSSExtractPlugin(),
    ...['game11', 'game12', 'something-else', 'etc'].map((event) => {
      return new HtmlWebpackPlugin({
        template: `./src/${event}/index.html`,
        mViewPort: `width=device-width, initial-scale=1.0`,
        favicon: `./src/${event}/media/favicon-16x16.png`,
        title: `${event} Training`,
        filename: `${event}.htm`,
        chunks: [`${event}`]
      })
    })
  ]
}

使用 Webpack 循环 HTMLWebpackPlugin 的干净方法？

A clean way to loop HTMLWebpackPlugin with Webpack?

javascript

html-webpack-plugin

webpack-4