如何简化Webpack中多SCSS文件的重复配置规则？

在webpack.config.js中，针对不同SCSS文件重复配置了几乎完全相同的规则集合，仅文件名和输出文件名存在差异。例如：

针对src/styles/templates/cart.scss输出template.cart.css的规则：

{
  test: /cart\.s[ac]ss$/i,
  include: [
    path.resolve(__dirname, "src/styles/templates/cart.scss")
  ],
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'template.cart.css',
      }
    },
    { loader: 'extract-loader' },
    {
      loader: 'css-loader',
      options: { url: false },
    },
    { loader: 'postcss-loader' },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: false,
        sassOptions: { outputStyle: 'compressed' },
      },
    },
  ],
},

针对src/styles/templates/account.scss输出template.account.css的规则与上述完全一致，仅test、include和file-loader的name字段不同，这类重复配置多达十多次，希望精简代码，避免重复编写大量冗余内容。

方法1：提取通用配置，循环生成规则 #

将重复的loader配置提取为独立变量，再通过文件列表循环生成对应规则，只需维护文件列表即可：

const path = require('path');

// 提取通用的loader配置（所有规则共享的部分）
const templateScssLoaders = [
  { loader: 'extract-loader' },
  {
    loader: 'css-loader',
    options: { url: false },
  },
  { loader: 'postcss-loader' },
  {
    loader: 'sass-loader',
    options: {
      sourceMap: false,
      sassOptions: { outputStyle: 'compressed' },
    },
  },
];

// 定义需要处理的文件映射：键为源文件名称（不含后缀），值为输出文件名
const templateFiles = {
  cart: 'template.cart.css',
  account: 'template.account.css',
  // 新增文件只需添加键值对，比如 checkout: 'template.checkout.css'
};

// 循环生成规则数组
const templateScssRules = Object.entries(templateFiles).map(([fileName, outputName]) => ({
  test: new RegExp(`${fileName}\\.s[ac]ss$`, 'i'),
  include: [path.resolve(__dirname, `src/styles/templates/${fileName}.scss`)],
  use: [
    {
      loader: 'file-loader',
      options: { name: outputName },
    },
    ...templateScssLoaders, // 展开通用loader配置
  ],
}));

module.exports = {
  module: {
    rules: [
      // 其他webpack规则...
      ...templateScssRules, // 插入生成的所有规则
    ]
  }
}

方法2：通过函数生成单个规则 #

如果需要更灵活的定制，可以编写一个生成规则的函数，每次调用传入文件名和输出名即可生成对应规则：

const path = require('path');

// 生成template SCSS规则的工具函数
function createTemplateScssRule(fileName, outputName) {
  return {
    test: new RegExp(`${fileName}\\.s[ac]ss$`, 'i'),
    include: [path.resolve(__dirname, `src/styles/templates/${fileName}.scss`)],
    use: [
      {
        loader: 'file-loader',
        options: { name: outputName },
      },
      { loader: 'extract-loader' },
      {
        loader: 'css-loader',
        options: { url: false },
      },
      { loader: 'postcss-loader' },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: false,
          sassOptions: { outputStyle: 'compressed' },
        },
      },
    ],
  };
}

module.exports = {
  module: {
    rules: [
      // 其他webpack规则...
      createTemplateScssRule('cart', 'template.cart.css'),
      createTemplateScssRule('account', 'template.account.css'),
      // 新增规则只需调用函数传入参数
    ]
  }
}

两种方法均能大幅减少重复代码，其中方法1的维护成本更低，适合批量添加同类文件；方法2则更适合需要为个别规则做特殊调整的场景。

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