Webpack Muti file generation, and spliting CSS on Build

Hi Guys im trying to figure out how to have a Webpack config to do different banner sizes, which returns its individual asset pipeline, iv got it so far creating all the different directories with the /300x250.html/300x250.html specified as the folder, but looking to try copy the generated css to all the banners folders





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'
  module: {
    rules: [
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
        test: /\.s?css/i,
        use : [
        test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: ''

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.