如何用Webpack 5的resolve.alias替代废弃的null-loader正则测试？

项目中原本使用null-loader忽略指定格式资源，原配置如下：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      /* Use null-loader to drop resources that are not used ... */
      {
        test: /\.(jpg|png|gif)$/,
        use: 'null-loader'
      },
    ]
  }
};

由于null-loader已废弃，Webpack 5推荐用resolve.alias替代，但直接在alias对象中使用正则作为键不合法（如下写法无效）：

module.exports = {
  //...
  resolve: {
    alias: {
      /\.(jpg|png|gif)$/: false,
    },
  },
};

询问Webpack中是否有等效于原null-loader的配置方案。

你可以通过以下两种方式实现和原null-loader完全一致的效果：

方式一：用Object.fromEntries创建正则别名 #

Webpack的resolve.alias支持正则作为匹配规则，但不能直接在对象字面量中定义，需要通过Object.fromEntries构造包含正则键的别名对象：

module.exports = {
  // ...
  resolve: {
    alias: Object.fromEntries([
      [/\.(jpg|png|gif)$/, false]
    ])
  }
};

这样所有匹配jpg/png/gif后缀的文件都会被映射为false，Webpack会忽略这些资源的打包，且导入时返回null。

方式二：使用内置的noop-loader #

Webpack内置了noop-loader（无操作加载器），可以直接替代null-loader，配置如下：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'webpack/lib/noop-loader'
      }
    ]
  }
};

该加载器会让Webpack处理对应文件时返回空模块，和null-loader的行为完全一致。

两种方案都能满足需求，推荐优先使用第一种resolve.alias的方式，更贴合Webpack 5的配置规范。

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