注：以下教程都是在windows环境下实现的，使用其他操作系统的同学在实践过程中可能会有一些差异。上一章webpack项目搭建：(1)基础架构搭建我们搭建了一个基础的webpack项目，现在让我们在此基础上，结合babel搭建一个可以运行最新ES6语法的webpack项目。1、前期回顾上一章我们搭建了一个webpack工程，结构如下：并通过webpack.config.js的entry和output属性配置了webpack的打包规则：webpack.config.js是基于当前目录index.js为打包入口。通过webpack打包构建，在当前目录下生成一个test.js文件。通过简单的配置，webpack就可以正常工作。现在在当前目录下执行webpack打包命令，我们就可以得到test.js文件了。2.使用打包生成的test.js文件第一章的index.js文件很简单。它只是声明了一个值为整数123的测试变量。index.js在实际环境中，这样一段代码可以执行的功能非常有限。现在让我们扩展我们的项目，让它更强大。修改index.js文件，完成等待1秒弹出问候语的功能：index.jswebpack打包生成test.js文件；新建一个index.html文件，并引用packing生成的test.js文件：index.html现在让我们浏览在浏览器中打开index.html文件，稍等片刻，弹出消息Hello单词！会弹出。可以看出打包后的test.js和index.js的功能是一样的。这是因为webpack打包的本质是从入口文件开始，递归解析所有相关的依赖文件，打包成一个或多个文件（bundle）。webpack只是对你写的代码进行了重组和简化，并不影响代码的功能。webpack的魅力在于其强大的代码组织和优化能力。下面我们就来一步步了解一下webpack的打包配置，一点点揭开webpack的神秘面纱。3.ES6和BabelECMAScript6实现了许多强大的新特性。使用ES6，我们可以用更优雅的方式完成很多强大的功能。只是很多老的浏览器还不支持ES6语法，需要转成ES5语法才能使用，才能兼容更多的浏览器。而完成这些转换的正是Babel。Babel本质上是一个JavaScript编译器，通过：将JavaScript源代码解析为抽象语法树（AST）；将源代码的AST结果转换为目标代码的AST；将目标代码的AST转换为JavaScript代码。可以完成ES6代码到ES5代码的转换。当然，转换过程会很复杂。让我们先了解一下基本原理。想要深入了解的同学可以开发自己的BabelPlugin来熟悉AST的运行过程。Babel本身的安装和使用非常简单。对于我们现在的应用，可以通过以下流程来实现：安装babel-core包：cnpmi--save-devbabel-core；创建一个新的Babel测试文件babelTest.js并使用babel-core转换ES6代码（我们使用ES6箭头函数）：babelTest.js安装上一步中使用的babel-preset-env和babel-preset-stage-0包：cnpmi--save-devbabel-preset-envbabel-preset-stage-0;（babel-preset-env是一系列主流的Babel插件；Stage-X是实验阶段的Presets，）TC39将提案分为以下几个阶段：Stage0-Scarecrow：justOneidea，maybeababelplugin。第1阶段-提案：初步尝试。第2阶段-初稿：完成初步规范。阶段3-候选：完成规范和初始浏览器实现。第4阶段-完成：将添加到明年的版本中。执行当前目录下的babelTest.js文件：nodebabelTest.js，控制台输出信息：可以看到我们的ES6箭头函数已经转换为ES5'(function(){})'。现在我们了解了Babel的基本工作原理，让我们重写我们的index.js以使用ES6的新特性：index.js这里我们使用ES6的模板字符串和箭头函数。模板字符串可以像普通字符串一样使用反引号（`）来标识字符串，也可以用来定义多行字符串，或者在字符串中嵌入变量。在不配置Babel的情况下，我们通过webpack命令进行打包，可以发现生成的test.js文件依然使用ES6语法：test.js注：截图部分为test.js最后一个参数部分。下面我们看看如何将Babel集成到webpack中，将ES6代码转换为ES5代码。4.webpack+Babel搭建ES6开发平台既然要将webpack和Babel结合起来，就需要在两者之间建立一个链接，而webpack的loader可以生成这个链接，下面我们来修改一下我们的webpack。config.js配置文件：webpack.config.js可以看到我们这里添加了一个module.rules配置项，rules数组中的每一项都是一个loader使用规则，loader用来处理不同的源码文件类型转换，允许您在导入或“加载”模块时预处理文件。现在我们将第一条规则配置为对以.js结尾的文件使用babel-loader。由于我们的项目中还没有babel-loader，所以我们先通过cnpm安装模块：cnpmi--save-devbabel-loader。现在我们已经准备好了webpack，webpack和Babel之间的纽带，接下来我们需要准备Babel的相关配置。上一节我们介绍了单独使用Babel的实现方法，但是一般情况下，在webpack中，我们不会主动调用babel-core解析ES6代码，而是在webpack编译时使用babel-loader自动解析ES6代码。那么现在的问题是，在上一节使用babel-core的过程中，我们使用了两个preset，env和stage-0。既然没有使用babel-core，那么这两个presets应该在哪里配置呢？这里我们有两种方式来实现上面的配置：使用Babel提供的方式：通过Babel目录下的.babelrc配置文件完成配置（直接创建.babelrc文件可能会有命名约定问题，可以通过VS编辑Code、Sublime等浏览器来创建文件）。这里的.babelrc和webpack.config.js类似，只是babel-loader执行过程中会用到.babelrc文件。.babelrc使用webpack提供的方法：在webpack.config.js的module.rules规则中，我们也可以通过loader语法配置Babel的presets：webpack.config.js我们使用第一种方法配置.babelrc文件，项目目录结构如下：现在让我们在当前目录下执行webpack命令，查看生成的test.js文件，可以发现我们的index.js已经转化为ES5代码了：打开我们的index.html在浏览器中找到打包好的test.js可以正常运行：使用webpack搭建ES6编译环境结束。下一章，我们开始搭建webpack开发环境。（Webpack项目搭建：（三）开发环境-本地服务器搭建）源码下载地址：https://github.com/xh4722/web...参考资料：ECMAScript6入门（阮一峰）babel-handbookwebpack中文文档巴别中文网
