My goal is to streamline my CSS files in my development environment by combining and minifying them into a single file. I want this new file to have a hashed name based on its content, which should automatically be linked in my index.html file within the distribution folder.
I believe this is achievable with Webpack 4, considering its versatility. Can someone guide me on how to set this up?
Importantly, I cannot use import statements or similar techniques in my JavaScript code for this task.
I've experimented with plugins like Mini Css Extract and Optimize CSS Assets within Webpack but haven't been successful in generating the desired output file yet (I understand that modifying the index.html won't happen, but having the CSS file is a good start).
The current structure of my files is as follows: 'mainFolder'/public/css <- source CSS folder, 'mainFolder'/dist/css <- target folder for minified file
My configuration currently looks like this:
// JavaScript paths required for webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: [
'./public/js/app.js',
...
'./public/js/lib/angular-semantic-ui.min.js'
],
output: {
filename: 'js/[contenthash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'dist'
},
devtool: 'source-map ',
plugins: [
new CleanWebpackPlugin(['dist'], {
}),
new HtmlWebpackPlugin({
title: 'Zenvite',
template: './public/templates/index.html',
filename: 'templates/index.html'
}),
new CopyWebpackPlugin([
...
]),
new MiniCssExtractPlugin({
filename: 'app.css',
chunkFilename: '[contenthash].css',
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../public'
}
},
"css-loader"
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
};
I am still striving to achieve a merged and minified [contenthash].css file along with altering the index.html header section. Any assistance would be greatly appreciated, and feel free to ask if you need more information.