webpack 条件 css 文件名输出取决于条目名称答案

【问题标题】：webpack conditional css filename output dependent on entry namewebpack 条件 css 文件名输出取决于条目名称
【发布时间】：2021-01-05 07:11:45
【问题描述】：

我的 webpack 有以下配置，它们都可以正常工作并创建 css 文件，并在文件名后附加内容哈希：

entry: {
  main: 'js/main',
  checkout: 'js/checkout',
  iframe: 'js/iframe',
},
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[contenthash].css"
  }),
],

我想为 sahdow dom 添加一个新入口点并创建一个没有附加哈希的 css 文件 - 有没有办法编辑配置来执行此操作？

类似于下面的内容，但使用filename 而不是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 中？

【问题讨论】：

标签： css webpack mini-css-extract-plugin

【解决方案1】：

我正在使用 Webpack 5.50 和 MiniCSSExtractPlugin 2.2.0。事实证明，{name} 嵌套在属性 {chunk} 中，因此您的示例适用于以下代码：

   new MiniCssExtractPlugin({
       filename: ({ chunk: {name} }) => name === 'shadow' ?
           '[name].css' :
           '[name].[contenthash].css'
   }),

【讨论】：