使用Webpack如何规范地循环使用HTMLWebpackPlugin？

Question

我正在使用带有HTMLWebPackPlugin的Webpack 4。 我目前正在处理接近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}']
       }),
   }),

上面的代码无法工作，只是一个草图。但是今天是否有可能不添加额外的插件或修改输出而实现类似的功能呢？我只想添加数组值，这将创建一个新的实例。

非常感谢！

- klewis

---

从您的想法来看，您可以使用Array.prototype.map替代：['game11'，'game12'，'something-else'，'etc'] .map（（event）=> { return new HtmlWebpackPlugin({... - lenilsondc

喜欢它！！！我不知道这个存在。但是即使我使用它，我要如何处理循环过程中的逗号分隔实例。这是我还不知道如何处理的事情之一... - klewis

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}`]
      })
    })
  ]
}

- lenilsondc

---

谢谢更新！有了这个设置，我如何将新的MiniCSSExtractPlugin()和new webpack.ProvidePlugin()作为额外的插件包含进去？ - klewis

@klewis 抱歉，我在插件周围多加了一个 []。 - lenilsondc

感谢你没有放弃我兄弟。现在它遇到了理解 ${event} 的问题。我想知道在 webpack 中是否有启用模板字面量的设置。但是我现在能够使用加号和变量名的经典表示法，而且它也可以工作！ - klewis

我不知道三个点符号的表示方法，谢谢你提醒我！ - klewis

你必须使用\``而不是'来使${event}`正常工作，我也已经修复了这个问题。 - lenilsondc