webpack5 不再为Node.js模块自动引用 Polyfills

错误描述

ERROR in ./node_modules/dropbox/dist/Dropbox-sdk.min.js 1:30619-30636
Module not found: Error: Can't resolve 'crypto' in '/.../node_modules/dropbox/dist'

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 }	

​ 最近在一个quasar2项目中使用到 node-2fa，正在我安装好这个依赖，启动项目时迎来了报错 crypto module not found，于是我找到了node-2fa的源码发现其中有引用到 crypto，我就顺着报错继续安装了 crypto，运行依旧报一样的错误，发现安装的crypto 里面是个空包，还有一个md的描述文件：

描述如下：

原来是npm上面已经弃用了这个包，所以再次安装也无法使用

报错原因

使用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 stream-browserify

因为使用了crypto可能会在项目中同时用到stream，依据项目情况要不要安装 stream-browserify

2、配置 package.json

新增以下配置项(其中browser与dependencies等配置项同级别)

// 1.不需要node polyfilss  
"browser": {  
	"crypto": false
},

3、配置 quasar.conf.js

chainWebpack (chain) {
    chain.resolve.fallback = {
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
    }
    chain.plugin('env').use(new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
    }))
    chain.resolve.alias.set('crypto', 'crypto-browserify')
    chain.resolve.alias.set('stream', 'stream-browserify')
},

因为我项目的用途需要使用到buffer 所以在这里也有配置

注：网上很多人的解决方案里面对buffer的配置没说清楚，碰到了很多方案，最终得到这一种配置是成功的