Webpack构建时替换导入CSS扩展名实现两种构建模式

我有一个基于webpack-5的React项目，部分组件文件夹中存在两类同级样式文件：fileName.css和fileName.shad.css。代码中仅导入了.css文件（如import "./fileName.css";），从未导入.shad.css文件。需要实现两种构建模式：

• 正常构建：仅使用已导入的.css文件
• shad构建：自动替换为使用对应的.shad.css文件（忽略原.css）

当前webpack配置如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  output: {
    path: path.join(__dirname, "/dist"), // the bundle output path
    filename: "bundle.js", // the name of the bundle
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html", // to import index.html file inside index.js
    }),
  ],
  devServer: {
    port: 3030, // you can change the port
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // .js and .jsx files
        exclude: /node_modules/, // excluding the node_modules folder
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(sa|sc|c)ss$/, // styles files
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts
        loader: "url-loader",
        options: { limit: false },
      },
    ],
  },
};

通过环境变量结合webpack的解析钩子和规则配置，就能实现样式文件的动态替换，具体步骤如下：

1. 添加构建命令与环境变量 #

先安装cross-env（用于跨平台设置环境变量）：

npm install cross-env --save-dev

然后在package.json的scripts中添加两个构建命令：

"scripts": {
  "build": "cross-env BUILD_MODE=normal webpack --mode production",
  "build:shad": "cross-env BUILD_MODE=shad webpack --mode production",
  "start": "cross-env BUILD_MODE=normal webpack serve --mode development"
}

2. 修改webpack配置文件 #

根据环境变量动态调整解析规则和样式处理逻辑：

const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 获取当前构建模式，默认正常构建
const BUILD_MODE = process.env.BUILD_MODE || "normal";

module.exports = {
  output: {
    // 不同模式输出到不同目录，避免产物覆盖
    path: path.join(__dirname, `/dist-${BUILD_MODE}`),
    filename: "bundle.js",
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css', '.shad.css'],
    plugins: [
      {
        apply(resolver) {
          // 在解析阶段替换css路径为shad.css（仅shad模式）
          resolver.hooks.resolve.tap('ReplaceCssWithShadCss', (request) => {
            if (BUILD_MODE === "shad" && request.request?.endsWith('.css')) {
              const shadPath = request.request.replace(/\.css$/, '.shad.css');
              const fullPath = path.resolve(request.path, shadPath);
              try {
                // 检查shad.css文件是否存在，存在则替换路径
                fs.accessSync(fullPath);
                request.request = shadPath;
              } catch (e) {
                // 不存在则保留原css路径
              }
            }
            return request;
          });
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  devServer: {
    port: 3030,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        // 根据构建模式匹配对应的样式文件
        test: BUILD_MODE === "shad" ? /\.shad\.css$/ : /\.css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader",
        options: { limit: false },
      },
    ],
  },
};

方案说明 #

• 环境变量区分模式：通过BUILD_MODE变量判断当前构建类型，自动切换逻辑
• 产物目录隔离：不同模式的构建产物输出到dist-normal和dist-shad，避免互相覆盖
• 动态路径替换：在webpack解析import "./fileName.css"时，shad模式下会自动检查并替换为.shad.css（文件不存在则保留原路径）
• 样式规则匹配：仅处理当前模式对应的样式文件，避免冗余编译

补充适配 #

如果项目使用Sass（.scss/.sass），只需把规则中的.css和.shad.css替换为.scss/.shad.scss即可，逻辑完全一致。

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