Webpack 5 能否正确生成可注入Shadow DOM的CSS捆绑包？

你遇到的问题主要是因为当前配置里asset/source和css-loader的组合冲突了——asset/source会原封不动导出文件内容，而css-loader默认会把CSS转换成JS模块代码，两者叠加就得到了Webpack生成的脚本，而不是处理后的CSS字符串。下面是具体的解决方案：

正确配置：让CSS处理URL后以字符串导出 #

我们可以利用css-loader的exportType选项，让它直接输出处理过URL的CSS字符串，完美适配Shadow DOM的注入需求。

基础配置（带?raw查询） #

修改你的Webpack规则如下：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /raw/, // 通过?raw标识需要用于Shadow DOM的CSS
            use: [
              {
                loader: 'css-loader',
                options: {
                  exportType: 'string', // 核心：让css-loader导出处理后的CSS字符串
                  url: true, // 启用URL转换（默认就是true，确保图片路径被处理）
                  // 可选：把小图片转成base64，避免Shadow DOM的路径问题
                  url: {
                    dataUrlCondition: {
                      maxSize: 8 * 1024 // 8KB以内的图片内联为base64
                    }
                  }
                }
              }
            ]
          },
          // 你的其他CSS规则（比如全局样式用style-loader注入）
          {
            use: ['style-loader', 'css-loader']
          }
        ]
      },
      // 处理图片资源的规则（必须配置，否则css-loader无法转换URL）
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // 默认：把图片输出到打包目录，生成哈希文件名
        // 如果想所有图片都内联base64，换成下面的配置：
        // type: 'asset',
        // parser: {
        //   dataUrlCondition: {
        //     maxSize: Infinity
        //   }
        // }
      }
    ]
  }
};

在组件中使用 #

导入带?raw查询的CSS，直接注入Shadow DOM即可：

import headerCss from './components/header.css?raw';

class Header extends HTMLElement {
  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });
    
    // 创建style元素并注入处理好的CSS
    const styleEl = document.createElement('style');
    styleEl.textContent = headerCss;
    shadow.appendChild(styleEl);

    // 添加组件其他内容
    const logoEl = document.createElement('div');
    logoEl.id = 'logo';
    shadow.appendChild(logoEl);
  }
}

customElements.define('app-header', Header);

进阶：自动识别组件内的CSS（无需?raw） #

如果你的组件CSS都放在固定目录（比如src/components），可以直接给这类CSS单独配置规则，不用每次加?raw：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src/components'), // 只匹配组件内的CSS
        use: [
          {
            loader: 'css-loader',
            options: {
              exportType: 'string',
              url: {
                dataUrlCondition: {
                  maxSize: 8 * 1024
                }
              }
            }
          }
        ]
      },
      // 全局CSS规则
      {
        test: /\.css$/,
        exclude: path.resolve(__dirname, 'src/components'),
        use: ['style-loader', 'css-loader']
      },
      // 图片资源规则
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  }
};

关键注意点 #

• 必须配置图片等资源的处理规则：css-loader依赖Webpack的asset模块来转换CSS中的url()，所以一定要有对应的图片/资源规则。
• 内联base64更适合Shadow DOM：因为Shadow DOM有自己的DOM作用域，引用外部资源路径容易出问题，把小资源转成base64能避免这类问题。

内容的提问来源于stack exchange，提问作者TheGr8_Nik