我想不使用style-loader
或css-loader
加载CSS。因为它增加了捆的大小。所以我用file-loader
加载css文件。这样会生成一个具有随机哈希值的css文件,其文件名类似于2309843904.css
。现在如何在index.html
中包括它。
我使用html-webpack-plugin
,但我不知道如何在index.html
中包含此CSS文件。
最佳答案
根据mini css extract plugin将webpack docs与style-loader和css-loader一起使用将执行相同的操作。它将把CSS从捆绑中剥离到一个单独的文件中,并通过html头部中的注入的链接标签加载它。例如,您可以像这样对名称进行哈希处理:
//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',
}),