我想在不使用 style-loader
或 css-loader
的情况下加载 css。因为它增加了包的大小。所以我使用 file-loader
来加载 css 文件。这将生成一个带有随机哈希作为文件名的 css 文件,如 2309843904.css
。现在我如何将其包含在 index.html
中。
我使用 html-webpack-plugin
但我不知道如何将此 css 文件包含在 index.html
中。
最佳答案
使用 mini css extract plugin根据 webpack docs 以及 style-loader 和 css-loader会做同样的事情。它会将 CSS 从 bundle 中剥离到一个单独的文件中,并通过 html 头部的注入(inject)链接标记加载它。您可以散列名称,例如,像这样:
//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',
}),
关于javascript - 如何使用 html webpack 插件将文件加载器所需的 css 文件包含到 index.html 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57483448/