如何配置Webpack，使构建在包含特定依赖（如fs）时失败？

要实现构建时检测到特定依赖（比如fs模块）就直接失败，你可以通过自定义Webpack插件监听模块解析过程，一旦发现禁止的模块就抛出错误终止构建，具体配置如下：

基础实现（禁止fs模块） #

在你的webpack.config.js中添加自定义插件：

module.exports = {
  // 保留你原有的entry、output等配置
  plugins: [
    function() {
      this.hooks.normalModuleFactory.tap('ForbidFsPlugin', (factory) => {
        factory.hooks.afterResolve.tap('ForbidFsPlugin', (result) => {
          // 检测当前解析的模块是否是fs
          if (result.request === 'fs') {
            throw new Error('构建失败：UI代码禁止引入fs模块');
          }
          return result;
        });
      });
    }
  ]
};

批量禁止多个模块 #

如果需要禁止多个模块，可以扩展为数组检测：

// 定义禁止的模块列表
const forbiddenModules = ['fs', 'child_process', 'net'];

module.exports = {
  plugins: [
    function() {
      this.hooks.normalModuleFactory.tap('ForbidModulesPlugin', (factory) => {
        factory.hooks.afterResolve.tap('ForbidModulesPlugin', (result) => {
          if (forbiddenModules.includes(result.request)) {
            throw new Error(`构建失败：禁止引入模块 "${result.request}"`);
          }
          return result;
        });
      });
    }
  ]
};

原理说明 #

这个自定义插件通过监听Webpack的两个核心钩子：

1. normalModuleFactory：获取模块工厂实例
2. afterResolve：在模块解析完成后触发，此时可拿到当前模块的请求路径，判断是否属于禁止列表，若匹配则抛出错误，Webpack会自动终止构建并输出你定义的错误信息。

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