Webpack编译报错求助：13个模块未找到错误无法解决

1. 适配Webpack 5的核心模块配置 #

Webpack 5不再自动polyfill Node.js核心模块，需手动在webpack.config.js中配置这些模块的处理规则：

module.exports = {
  // 保留原有其他配置
  resolve: {
    fallback: {
      "fs": false, // 若业务无需该模块，设为false直接忽略
      "zlib": require.resolve("browserify-zlib"),
      "crypto": require.resolve("crypto-browserify"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "stream": require.resolve("stream-browserify"),
      "path": require.resolve("path-browserify")
      // 其他缺失模块可按此格式对应配置
    }
  },
  plugins: [
    // 注入全局polyfill补全process和Buffer
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

同时安装对应的依赖包：

npm install browserify-zlib crypto-browserify stream-http https-browserify stream-browserify path-browserify process buffer --save-dev

2. 排查第三方依赖的Node模块引入问题 #

部分第三方依赖可能在浏览器环境中错误调用了Node核心模块，可通过以下方式定位：

• 运行npm ls fs zlib crypto http，查看哪些依赖包间接引入了这些模块
• 使用webpack-bundle-analyzer分析打包产物，定位具体引入文件：

  npm install webpack-bundle-analyzer --save-dev
  

  在webpack配置中添加插件：

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  
  module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
  };
  

  执行构建后会打开可视化页面，找到触发Node模块引入的代码文件。
• 针对问题依赖，查看其文档是否有浏览器适配方案，或替换为浏览器友好的替代包。

3. Create-React-App项目的特殊处理 #

若项目基于create-react-app创建，无法直接修改webpack配置，需用craco覆盖默认配置：

1. 安装依赖：

npm install craco --save-dev

2. 根目录创建craco.config.js：

const webpack = require('webpack');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        "fs": false,
        "zlib": require.resolve("browserify-zlib"),
        "crypto": require.resolve("crypto-browserify"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "stream": require.resolve("stream-browserify")
      };
      webpackConfig.plugins.push(
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer']
        })
      );
      return webpackConfig;
    }
  }
};

3. 修改package.json中的脚本命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 环境与缓存清理 #

• 切换Node版本至项目兼容的稳定版（推荐用nvm管理）：

nvm install 18
nvm use 18

• 彻底清理缓存后重新安装依赖：

rm -rf node_modules package-lock.json yarn.lock
npm cache clean --force
npm install
npm run build

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