webpack 条件 css 文件名输出取决于条目名称 [英] webpack conditional css filename output dependent on entry name
问题描述
我的 webpack 有以下配置,它们都可以工作并创建 css 文件,并将内容哈希附加到文件名:
I have the following config for my webpack which all works and creates css files with a content hash appended to the filenames:
entry: {
main: 'js/main',
checkout: 'js/checkout',
iframe: 'js/iframe',
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
}),
],
我想为 sahdow dom 添加一个新的入口点并创建一个没有附加哈希的 css 文件 - 有没有办法编辑配置来做到这一点?
I want to add a new entry point for the sahdow dom and create a css file that doesn't have the hash appended to it - is there a way to edit the config to do this?
类似于下面的内容,但使用 filename
而不是 moduleFilename
:
something like the below, but with filename
instead of moduleFilename
:
entry: {
main: 'js/main',
checkout: 'js/checkout',
iframe: 'js/iframe',
shadow: 'js/shadow',
},
plugins: [
new MiniCssExtractPlugin({
moduleFilename: ({ name }) => name === 'shadow' ? '[name].css' : '[name].[contenthash].css',
}),
],
或者,有没有办法将散列文件名导入到我的影子 dom 中?
Or alternatively, is there a way I can get the hashed filename to import into my shadow dom?
推荐答案
我使用的是 Webpack 5.50 和 MiniCSSExtractPlugin 2.2.0.事实证明,{name} 嵌套在属性 {chunk} 中,因此您的示例可以使用以下代码:
I'm using Webpack 5.50 and MiniCSSExtractPlugin 2.2.0. It turns out that {name} is nested in a property {chunk} so your example works with the code below:
new MiniCssExtractPlugin({
filename: ({ chunk: {name} }) => name === 'shadow' ?
'[name].css' :
'[name].[contenthash].css'
}),
这篇关于webpack 条件 css 文件名输出取决于条目名称的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!