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
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

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

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