I want to load css without using style-loader or css-loader. Because it increases the bundle size. So I use file-loader to load css file. This generates a css file with random hash as the filename like 2309843904.css. Now how do I include this in index.html.
I use html-webpack-plugin but I don't know how to include this css file in index.html.
Add a comment
|
1 Answer
Using mini css extract plugin along with style-loader and css-loader as per the webpack docs will do the same thing. It will strip the CSS from the bundle into a separate file and load it via an injected link tag in the head of the html. You can hash the name, for example, like this:
//webpack config module.rules
{
test: /\.(sa|sc|c)ss$/,
loaders: [
MiniCssExtractPlugin.loader,
'css-loader',
...
],
},
//then in module.plugins
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[name].[contenthash].css',
}),
2 Comments
eguneys
and how do I include the output css file in the index.html?
James South
mini css injects it. I don't think you are really saving anything by using file-loader for css instead of css-loader, all loaders do the same thing. mini css extracts styles into a separate file, injects the <link> tag into the html head, and thus a separate network request is made for the css file.