Webpack：产品-基于数组的多实例文件分发

Question

基于给定数组的多捆绑拆分

大家好，我正在尝试弄清楚如何使webpack配置执行不同的横幅尺寸，从而返回其单独的资产管道， 到目前为止，iv已经创建了所有不同的目录，并指定了/300x250.html/300x250.html作为文件夹，但是可以尝试将生成的css复制到所有的Banners文件夹中

---

所需的构建结构

src
  index.html
  index.js
  styles
    index.scss
    mixins.scss


Build
  300x250
    300x250.html
    index.js
    styles.css

  160x600
    160x600.html
    index.js
    styles.css

  278x90
    278x90.html
    index.js
    styles.css

  

构建完成后，我将其拆分，它创建了不同的目录并将文件放置在生成的结构/300x250/300x250.html中，但只是试图弄清楚如何将已编译的CSS复制到每个目录都会生成大小目录（300x250 / styles.css），因此它们具有自己的独立资源。

---

当前构建结构

  278x90
    278x90.html

---

文件：webpack.config.prod.js

const Path = require('path');
const Webpack = require('webpack');
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');


let bannerSizes  = [
 '160x600', '300x250', '278x90', '300x600', '320x50', '120x600', '468x60','160x600', '300x250', '728x90', '300x600', '320x50', '120x600', '468x60'
];


let entryHtmlPlugins = bannerSizes.map(function(entryName) {
  return new HtmlWebpackPlugin({
     title: entryName,
     filename: '/' + entryName + '/' + entryName + '.html',
     template: 'src/index.html',
     bannerSizesClass: entryName
  });
});

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  stats: 'errors-only',
  bail: true,
  output: {
    filename: 'js/[name].[chunkhash:8].js',
    chunkFilename: 'js/[name].[chunkhash:8].chunk.js'
    // filename: '[name].js',
    // chunkFilename: 'main.js'
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new Webpack.optimize.ModuleConcatenationPlugin(),
    new MiniCssExtractPlugin({
      path: path.join(__dirname, 'build'),
      filename: '/style.css'
    }),
  ].concat(entryHtmlPlugins),
  module: {
    rules: [
    {
    test: /\.(js)$/,
    exclude: /node_modules/,
    use: 'babel-loader'
    },
    {
     test: /\.s?css/i,
      use : [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
      ]
    },
    {
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
    use: {
     loader: 'file-loader',
     options: {
     name: '[name].[ext]',
     outputPath: ''
    }
   }
  },
 ]
 }
});