错误提示

在这里插入图片描述

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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

原因

使用webpack5的原因

v5 与 v4

v4以前附带了许多node.js核心模块的polyfill,在构建时给 bundle附加了庞大的polyfills,在大部分情况下,polyfills并不是必须。

现在v5将要停止这一切,在模块的应用中不再自动引入Polyfills,明显的减小了打包体积。

v4

在v4中,crypto模块会主动添加 polyfill,也就是crypto-browserify,我们运行的代码是不需要的,反而会使最后的包变大,影响编译速度

v5

在v5编译中,会出现polyfill添加提示,如果不需要node polyfille,按照提示 alias 设置为 false 即可

解决方法

1、安装

npm install crypto-browserify

2、配置package.json,新增以下配置项(其中browserdependencies等配置项同级别)
 "browser": {
    "crypto": false
  },

配置后

{
	// ...
  "browser": {
    "crypto": false
  },
  "dependencies": {
    "crypto-browserify": "^3.12.0",
    // ...
  }
}
``
3、在webpack.config.js中增加配置项
// webpack.config.js
  resolve: {
    // 1.不需要node polyfilss
    alias: {
      crypto: false
    },
  },

参考文章

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐