Чистый способ зациклить HTMLWebpackPlugin с Webpack? - PullRequest
Новая
       34

Чистый способ зациклить HTMLWebpackPlugin с Webpack?

0 голосов
/ 10 октября 2018

Я использую 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']
        }),

У меня их 30 в моем файле webpack.config.js.Но я бы предпочел сделать что-то подобное вместо этого ... 

 ['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}']
       }),
   }),

Приведенный выше код не работает и это только набросок.Но возможно ли сделать что-то подобное сегодня без добавления дополнительных плагинов или изменения моих выводов?Я просто хочу добавить значения массива, которые сами создадут новый экземпляр.

Большое спасибо!

1 Ответ

0 голосов
/ 10 октября 2018

Следуя той же логике, которую вы предложили в своем вопросе, вы можете использовать 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}`]
      })
    })
  ]
}
...