Webpack 5如何仅为legacy入口添加postcss-loader？

核心思路 #

通过Webpack的oneOf规则结合issuer字段，精准匹配由legacy入口引入的样式文件，仅对这类文件应用postcss-prefixer插件；其他入口的样式文件则走常规编译流程。

修正后的Webpack配置 #

config = {
  entry: {
    main: "./home",
    legacy: "./legacy",
  },

  module: {
    rules: [
      {
        test: /\.(scss|css)$/i,
        // 使用oneOf拆分规则，匹配不同场景的样式文件
        oneOf: [
          // 仅匹配legacy入口引入的样式文件
          {
            issuer: { test: /legacy\.js$/ }, // 匹配legacy入口文件（根据实际文件名调整）
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              "resolve-url-loader",
              {
                loader: "sass-loader",
                options: {
                  sourceMap: true,
                  sassOptions: { outputStyle: "expanded" },
                },
              },
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    ident: "postcss-scss",
                    syntax: "postcss-scss",
                    plugins: [
                      require("postcss-prefixer")({
                        prefix: "legacy-",
                      })
                    ],
                  },
                },
              },
            ],
          },
          // 匹配其他入口引入的样式文件，不添加前缀
          {
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader",
              "resolve-url-loader",
              {
                loader: "sass-loader",
                options: {
                  sourceMap: true,
                  sassOptions: { outputStyle: "expanded" },
                },
              },
            ],
          },
        ],
      },
    ],
  },
}

关键说明 #

1. issuer匹配逻辑：issuer指向引入当前样式文件的父文件，这里通过匹配legacy入口文件（如legacy.js），确保只有该入口引入的样式才会触发前缀添加逻辑。
2. Loader顺序调整：Loader执行顺序为从右到左，因此sass-loader需在postcss-loader之前执行（先将SCSS编译为CSS，再由PostCSS处理），避免语法解析错误。
3. 多配置方案排查：若之前尝试多配置文件仅执行一套，需确认配置是否以数组形式导出（module.exports = [mainConfig, legacyConfig]），且每个配置的entry、output.path/output.filename需完全区分，避免资源覆盖。

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