babel是公认的es6和es2017转es5的好工具，（虽然是为了兼容万恶的ie），接下来给大家带来babel-webpack的简单安装教程。我的水平有限。如有遗漏或错误，请与我联系。评论区指出，希望大家不吝阅读babel、官网和webpack的文档，发现了很多坑，所以在这里写一篇文章，希望能帮助大家配置babel和webpack的环境.以下环境：babel-loaderbabel-corebabel-preset-envbabel-pollyfillwebpack如果没有安装node，先安装node传送门：http://www.runoob.com/nodejs/...国内镜像（必填）：https://cnodejs.org/topic/4f9...那么让我们开始吧。第一步是npminit-y或npminit然后选择相应的配置。现在目录应该是这样的：/——package.json第二步安装上述环境npmi-Dbabel-loaderbabel-corebabel-preset-envbabel-polyfillwebpack如果报错不够，再次执行，暴力片当前目录结构：.|--node_modules`--package.json安装完成后，需要配置babel环境和webpack设置Step3,配置webpack.config.jsin/目录（在根目录下新建一个webpack.config.js文件，然后复制以下代码）constpath=require('path');module.exports={entry:'./src/index.js',module:{rules:[{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"}]},output:{filename:'bundle.js',path:路径.resolve(__dirname,'dist')}};现在目录结构：.|--node_modules|--package.json`--webpack.config.js第四步，配置babel默认文件。这一步我们需要在根目录()新建一个.babelrc文件，但是用windows文件管理器是做不到的。我应该怎么办？羊毛布？我们可以使用编辑器或者gitbash创建一个文件echo>.babelrcOK，现在打开目录，.babelrc文件出现了。然后，我们来配置babel的默认环境。在.babelrc中粘贴如下代码：{"presets":["env"]}至此，我们的基本环境已经搭建完成，下面开始构建我们的第一个项目。当前目录结构：.|--node_modules|--package.json|--.babelrc`--webpack.config.js第五步，新建index.js和index.html文件在根目录下新建src目录和dist目录mkdirsrcdist新建文件index.js目录下的内容src/目录导入“babel-polyfill”后;letname='max';console.log(Number.isNaN(0));blue，在根目录下建一个index.html，内容为好了，至此项目创建完毕，可以开始编译现在目录结构为：.|--.babelrc|--dist|--index.html|--node_modules|`--.staging|--package.json|--src|`--index.js`--webpack.config.jsindex.js文件会被编译成dist目录下的文件，具体的转换规则在webpack.config.js中，具体用法在以后的更新中介绍。Step6.编译文件，在命令行输入ps：根据下载方式的不同，可能会有不同的路径node./node_modules/webpack/bin/webpack。js完成后会提示$node./node_modules/webpack/bin/webpack.jsHash:a7e9dbe767d3662fefe0Version:webpack3.8.1Time:17858msAssetSizeChunksChunkNamesbundle.js264kB0[emitted][big]main[89](webpack)/buildin/global.js488bytes{0}[built][124]./src/index.js90bytes{0}[built]+325hiddenmodules恭喜，基本ok，然后打开index.html，打开console，如果是false，就安装好了。本文正在更新中。如果有错误或者遇到欢迎在评论区指出，我会尽力解决问题
