webpack的js兼容性处理

webpack的js兼容性处理

1.在package.json所在文件夹下下载文件

npm install babel-loader @babel/core @babel/preset-env --save-dev

2.在webpack.config.js中进行配置

1)基本js兼容性处理如下
在这里插入图片描述
2)全部js兼容性处理
继续下载@babel/polyfill

npm install @babel/polyfill --save-dev

使用方法,只需在需处理的js中引入即可,如下:
在这里插入图片描述
此种方法问题如下:
在这里插入图片描述
3)按需加载
在这里插入图片描述
继续下载core-js

npm install core-js --save-dev

webpack.config.js中配置如下:
在这里插入图片描述

当使用第三种方案的时候就不能使用第二种方案,将js中引入的第二种方案代码注释掉。

3.总结如下:

在这里插入图片描述
在实际使用中一般结合第一种和第三种,第二种使用较少。

猜你喜欢

转载自blog.csdn.net/weixin_43520099/article/details/106980819