webpack 版本5的报错

title: webpack 版本5的报错 id: 5a8fecb5e1d6cdac944c573f3671f359 tags: [] date: 2000/01/01 00:00:00 updated: 2023/10/25 14:22:16 isPublic: true --#|[分隔]|#--

webpack 版本5的报错

新版的 vue-cli 脚手架和新版的 create-react-app 脚手架，使用的都是大于等于webpack V5的版本。

而webpack V5的版本会有一个问题，使用它编译node、前端项目中使用一些node模块、或者引入某些插件时，就会出现类似下面的报错：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

意思是webpack < 5版本时，自带node.js的核心模块，但大于等于5时，不会了，毕竟现在使用webpack打包的大部分都是前台项目，node很少基本都不用打包，所以去掉node.js的核心模块，减少前端打包后体积。

如果项目想使用类似 path、http、fs……这些模块时，需要自己安装对应的模块并进行webpack配置，才能使用了（还有一个办法，就是不使用webpack了，这种因噎废食的做法应该很少人采用）。

所以解决办法很简单，就是按照报错的要求去处理一下，下面以 path 这个模块为例。

1. 首先，需要先安装 path-browserify这个依赖。

npm i path-browserify -S

接着，打开webpack配置文件，不同项目可能为以下不同的文件：

• 自己编写的 webpack 配置的 webpack.config.js 文件

• vue项目的 vue.config.js 文件

• 使用了react-app-rewired 的 react 项目的 config-overrides.js

• ……

2. 给配置文件添加如下配置：

module.exports = {
  entry: {……},
  output: {……},
  // 上面为其他配置
  resolve: {
    fallback: {
      path: require.resolve('path-browserify'),
    }
  }
}

如果按照报错说明的第二个「if」，设置为 path: false，那么实测，项目中引入的 path 就会变成一个空对象，也就是它所说的 empty module，其主要作用，也就只是引入不报错而已，但还是不能使用。