Webpack编译出现27错3警告，请求协助解决以启动服务器

错误解决 #

Webpack 5不再默认提供Node.js核心模块的polyfill，需手动配置回退或禁用，以下是对应每个错误的解决方案：

1. zlib模块未找到 #

• 安装依赖：npm install browserify-zlib --save-dev
• 在webpack配置中添加回退：

resolve: {
  fallback: {
    "zlib": require.resolve("browserify-zlib")
  }
}

• 若不需要该模块，可配置为："zlib": false

2. querystring模块未找到 #

• 安装依赖：npm install querystring-es3 --save-dev
• 配置回退：

resolve: {
  fallback: {
    "querystring": require.resolve("querystring-es3")
  }
}

• 不需要则设为："querystring": false

3. path模块未找到 #

• 安装依赖：npm install path-browserify --save-dev
• 配置回退：

resolve: {
  fallback: {
    "path": require.resolve("path-browserify")
  }
}

• 不需要则设为："path": false

4. crypto模块未找到 #

• 安装依赖：npm install crypto-browserify --save-dev
• 配置回退：

resolve: {
  fallback: {
    "crypto": require.resolve("crypto-browserify")
  }
}

• 不需要则设为："crypto": false

5. fs模块未找到 #

fs是Node.js文件系统模块，浏览器环境无法支持，直接禁用：

resolve: {
  fallback: {
    "fs": false
  }
}

6. http模块未找到 #

• 安装依赖：npm install stream-http --save-dev
• 配置回退：

resolve: {
  fallback: {
    "http": require.resolve("stream-http")
  }
}

• 不需要则设为："http": false

7. net模块未找到 #

net是Node.js网络模块，浏览器环境不支持，直接禁用：

resolve: {
  fallback: {
    "net": false
  }
}

8. url模块未找到 #

• 安装依赖：npm install url --save-dev
• 配置回退：

resolve: {
  fallback: {
    "url": require.resolve("url/")
  }
}

• 不需要则设为："url": false

9. buffer模块未找到 #

• 安装依赖：npm install buffer --save-dev
• 配置回退：

resolve: {
  fallback: {
    "buffer": require.resolve("buffer/")
  }
}

• 不需要则设为："buffer": false

警告解决 #

1. Critical dependency: the request of a dependency is an expression #

该警告来自express/lib/view.js，原因是express运行时动态加载模板引擎，Webpack无法静态分析此类动态依赖。可通过以下方式处理：

• 在webpack配置中跳过对express的解析（无需修改express代码时适用）：

module: {
  noParse: /express/
}

2. async_hooks模块未找到 #

async_hooks是Node.js核心模块，浏览器环境不支持，直接禁用：

resolve: {
  fallback: {
    "async_hooks": false
  }
}

完整Webpack配置示例 #

const webpack = require('webpack');

module.exports = {
  // 其他基础配置
  resolve: {
    fallback: {
      "zlib": require.resolve("browserify-zlib"),
      "querystring": require.resolve("querystring-es3"),
      "path": require.resolve("path-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "fs": false,
      "http": require.resolve("stream-http"),
      "net": false,
      "url": require.resolve("url/"),
      "buffer": require.resolve("buffer/"),
      "async_hooks": false
    }
  },
  module: {
    noParse: /express/
  },
  plugins: [
    // 若需全局暴露Buffer对象，添加此插件
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

执行以下命令安装所有依赖：

npm install browserify-zlib querystring-es3 path-browserify crypto-browserify stream-http url buffer --save-dev

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