修改index.js的内容，写一些ES6语法：

const arr=[ new Promise(()={})，new Promise(()={ })]；arr.map(项目={ console.log(项目))；})ES6功能非常强大，但目前并不是所有浏览器都支持，所以需要Babel在旧的浏览器或环境中将ES6代码转换成向后兼容的JavaScript代码。

让我们试一试，首先安装您需要的巴别塔包：

NPM install babel-loader @ babel/core-d配置webpack.config.js并添加一个rulues:

module : { rule 3360 [{ test :/。js$/，exclude: /node_modules/，//Exclude此目录中的所有代码Loader : ' Babel-Loader ' }]} Babel-Loader告诉webpack如何处理ES6代码，但它不会将ES6代码翻译成向后兼容的版本。如果要执行这一步，需要安装一个模块preset-env，它包含ES6代码转换的所有规则：

安装后配置npm install @babel/preset-env -D:

规则： [{test:/。js $/，exclude:/node _ modules/，//排除此目录下的所有代码。Loader3360' Babel-loader '，选项3360 { '预置' : ['@ Babel/preset-env]

没问题，语法已经翻译成了目前所有浏览器都能识别的语法，但光做到这一点是不够的，因为相对新的对象和功能，比如这里的Promise和map，其实在低版本浏览器中是不存在的。因此，在这个时候，我们不仅要转换语法，还要尝试将这些新功能添加到低版本浏览器中。怎么做？Babel提供了一个名为polyfill的工具，它安装了：

Npm install @babel/polyfill -D然后在index.js的顶部，介绍这个包：

import “@ babel/poly ill”保存代码，并再次打包以检查结果。您可以发现打包的main.js中有许多代码来帮助实现诸如Promise和map等新功能。看看main.js文件的大小：

859KB，使用polyfill之前先看看main.js的大小：

只有4.36KB，使用polyfill后文件变大了很多，说明polyfill使用了很多代码来填充新功能。但是，index.js中只使用了Promise和map，其他新特性都没有用。你能消除那些不用的实现方法吗？是，将用户内置配置添加到预设环境：

规则： [{test:/。js $/，exclude:/node _ modules/，//排除此目录中所有代码loader: 'babel-loader '。选项： { '预设' : [['@ babel/preset-env '，{使用buildin s 3360 ' usage ' } } }]使用builtins : ' usage '意味着，当使用polyfill将一些不存在的功能填充到较低版本的浏览器中时，并不是所有的功能都被填充，而是根据业务代码使用的功能来填充。例如，如果在这里使用Promise和map，将只填充这两个要素，而不使用其他要素。再次打包查看结果：

可以看到main.js的大小只有138KB。

您还可以在这里配置一些其他参数，例如targets参数：

规则： [{test:/。js $/，exclude:/node _ modules/，//排除此目录中所有代码loader: 'babel-loader '。选项： { '预设' : [['@ babel/preset-env '，{使用内建3360 '用法'，targets : {edge :' 17 '，//firefox : ' 60 ' edge高于17，//Firefox版本高于60 chrome: '67' //chrome版本高于67 } }]}]Targets指的是包将在什么样的浏览器中运行，有三种浏览器，以及在打包过程中，babel会看看这些浏览器对ES6代码的支持，是否有必要进行语法转换，填充一些新特性。运行打包命令查看结果：

发现Promise和map依然输出，没有填充新的特性，说明这三个版本的浏览器已经很好的支持ES6了，不需要额外的处理。main.js的大小改为原来的4.36KB。

至此，webpack对ES6的简单处理就完成了。

关于巴别塔的东西和配置项目还有很多，在https://babel.docschina.org应该学到更多的知识。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。