原创

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.


错误信息

解决方法

在webpack.config.js加上

resolve: {
	alias: {
	  crypto: false,
	  stream: false,
	  assert: false,
	  http: false,
	  https: false
	  }
}

每一个alias属性,对应1个以上的错误,根据自己错误信息填写

分析

问题来源:使用webpack5导致

webpack5 与 webpack4

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

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

webpack4

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

webpack5

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

害!为什么默认值不直接给false呢。。。

弊端

移除了Polyfills,可能会对项目造成很大的影响
例如

使用process.xxx,process.env.NODE_ENV是正常的
使用一个不存在的process.env.xxx或者打印process.env都将报错,process is not defined

解决process is not defined

又得回到原始写法,将丢失的Polyfills全部给找回来,下载插件

npm install node-polyfill-webpack-plugin

在webpack.config.js中添加配置

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

plugins: [
	new NodePolyfillPlugin()
]

也可以找回指定的Polyfill,crypto模块,但容易缺胳膊少腿。。。还是一键加载吧。。。

相关链接
https://github.com/webpack/webpack/issues/11282

https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed

相关知识文章

了解polyfill
https://zhuanlan.zhihu.com/p/71640183

使用webpack5 https://blog.csdn.net/P6P7qsW6ua47A2Sb/article/details/110015183?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161725928216780274159451%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161725928216780274159451&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-3-110015183.first_rank_v2_pc_rank_v29&utm_term=%22Module%20not%20found:%20Error:%20Can%27t%20resolve%20%27crypto%27%20in%E2%80%A6like%20this:%E2%86%B5%09resolve.fallback:%20%7B%20%22crypto%22:%20false%20%7D%22

webpack
  • 作者:零三(联系作者)
  • 最后更新时间:2021-07-23 14:09
  • 版权声明:自由转载-非商用-非衍生-保持署名
  • 转载声明:来源地址 https://web03.cn
  • 评论