Webpack报错：无法找到模块'url'与'path'问题求助

问题现象 #

• 浏览器调试器抛出错误：Uncaught Error: Cannot find module 'url'（来自utils.js第30行），对应源码var _url = require("url");无改动（git状态可证），但编译后代码变为webpack模块缺失的抛出逻辑：

  var _url = __webpack_require__(Object(function webpackMissingModule() { var e = new Error("Cannot find module 'url'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
  

• VS Code终端编译报错：

  ERROR in ./node_modules/css-loader/dist/utils.js 31:35-50
  Module not found: Error: Can't resolve 'path' in 'M:\Praca\Programowanie\race cars UI\node_modules\css-loader\dist'
  

问题原因 #

Webpack 5的重大变更：

BREAKING CHANGE: webpack < 5默认包含Node.js核心模块的polyfill，现在不再默认提供，请确认是否需要并配置polyfill。

解决方案 #

方法1：一键补全所有Node.js核心模块polyfill #

安装node-polyfill-webpack-plugin插件，自动处理所有Node.js核心模块的polyfill：

npm install node-polyfill-webpack-plugin --save-dev

在webpack配置文件（webpack.config.js）中添加插件配置：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  // 你的其他webpack配置
  plugins: [
    new NodePolyfillPlugin()
  ]
};

方法2：单独补全用到的模块 #

如果只需要解决url和path的问题，可手动安装对应polyfill包并配置别名：

1. 安装依赖：

npm install url path-browserify --save-dev

2. 在webpack配置中添加别名：

module.exports = {
  // 你的其他webpack配置
  resolve: {
    alias: {
      url: 'url',
      path: 'path-browserify'
    }
  }
};

方法3：忽略不需要的模块 #

如果代码实际不需要这些Node.js核心模块的功能，可让webpack忽略它们：

module.exports = {
  // 你的其他webpack配置
  resolve: {
    fallback: {
      url: false,
      path: false
    }
  }
};

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