In my current setup, webpack bundles css that has been imported in .js files into a separate style file and loads it after the .js bundle has finished loading. Because the .js bundle is loaded after html (end of /body tag), the page does not initially have styling.
Current webpack setup:
module.exports = {
entry: './client/index.js',
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html',
minify: true,
}),
new CleanWebpackPlugin(['dist']),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/,
},
{
test: /\.scss$/,
use: [{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
};
module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true, // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({}),
],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
}
}
}
},
plugins: [
new UglifyJsPlugin({
cache: true,
parallel: true,
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
}),
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
]
}]
},
});
I would ideally want to add a separate tag into the html header, where the bundled css file would be loaded. I did not find such an option in either HtmlWebpackPlugin options nor MiniCssExtractPlugin options. Do you know of a good way how to do this?
