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