正文
更新于2015年/11月/08 babel 6.0版本
仅仅是一个开发工具包？克隆压缩
webpack-black-triangle
或是
Unicorn Standard Starter Kit
的工作原理
从ES2015 到es2016 已实现了大量压缩，并加入了很棒的特性，事实上，使用它并不能帮助你太多。问题是，虽然ES6是趋势，但是浏览器仍然停留在过去。想要验证的话，在Chrome浏览器控制台输入箭头函数，它将提示你：
![Chrome being stuck in the present]()
当然，原因不仅如此，现在大多数浏览器都支持ES6，但有一个问题：你需要一个build 的过程。虽然这在过去有很多阻碍，但现在未必如此。
Build 不在意味着是300行的配置文件
在过去几年，也有很多关于Javascript的构建工具。webpack的突然出现，不在需要我们处理冗长且复杂的Gulpfiles和Gruntfiles。
Webpack让我们不需要在做很多事，例如，无论是github项目中的配置文件，webpack如何使用Babel转译ES6，编译LESS ，还是文件修改，重新加载页面都只是26行代码。
/u/nickguletskii200
这个网站曾提到
> Webpack是我用过的编译JS的最快的软件。
根据这些，我最近选择webpack构建
memamug.com
的系统，小的
open-source
app，前端是基于React-based的。考虑到webpack最大的问题是缺乏文档，我将会带你了解整个过程
用代码测试build项目
在开始之前，我们需要运行一些ES6代码在我们的构建的项目中，我为了你们精心设计了一个项目
black triangle
,开始运行，它就会开始旋转。
在build项目之前，我们先给代码建个目录，并在浏览器运行它。首先，将代码复制在一个新的文件夹中，或者从git上克隆。
$ git clone https://gist.github.com/9b7db05268e747b4aa4d.git black-triangle
假设现在已经有了 black-triangle目录，进入，将源文件移到该目录中，并对它进行更改。
$ cd black-triangle
$ mkdir src
$ mv index.html main.js BlackTriangle.js src
在浏览器中运行index.html，正常情况你会看到一个（不可移动的）黑色三角形，像下图这样
![title]()
最小可行的Webpack
当然这不是一篇关于黑色三角形的博客，而且关于webpack&& Babel，可以像下面那样，用node创建
$ npm install webpack-dev-server -g
$ npm install webpack-dev-server webpack babel-core babel-loader babel-preset-es2015 babel-polyfill
完成后，在black-triangle目录下启动服务，执行webpack-dev-server命令 加上HTML的路径和JavaScript的入口文件（如src/main.js）
$ webpack-dev-server --content-base src src/main.js
在
localhost:8080
打开项目，webpack被ES6阻塞，我们仍然看到一个不动的黑色三角形，是什么原因呢？
配置 Webpack
虽然我们已经安装了所有webpack解析ES6所需的包，但是我们仍然需要告诉它如何做到这一点。我们需要有个webpack的配置文件webpack.config.js 这个文件将包含我们整个项目的权限
为了使三角形旋转，在你的black-triangle目录下添加webpack.config.js文件，内容如下。然后重启webpack-dev-server服务，并重新加载页面，现不需要关心它是如何实现的，下面我会提到
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'babel-polyfill',
'./src/main'
],
output: {
publicPath: '/',
filename: 'main.js'
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ["es2015"],
}
}
]
},
debug: true
};
想要停止webpack-dev-server服务, ctrl-c (对于mac).
文件改变时不需要重启服务webpack.config.js就会重新刷新页面。
你的三角形旋转了吗？如果没有，请留言我将会帮助你。让我们来快速浏览下配置文件。
webpack.config.js的两部分
第一 关于文件本身
接下来是，关于我们在配置对象中的key值
-
entry是一个数组，包括JavaScript的主文件，之前还需要一个babel-polyfill
-
output 是webpack-dev-server提供编译后main.js的文件，为浏览器提供入口。
-
devtool告诉webpack要自动为我们提供源文件，这样浏览器就可以在他们的开发控制台中显示原始的文件(而不是编译的文件)。
-
module.loaders 是
loaders
的目录，包括我们的编译源.通过
babel-loader
告诉webpack 运行src目录下面的 .js 的文件，使用es2015插件将es2015(即ES6)转换为ES5。
-
debug是作为loader中的一个调试模式选项
如果你还想了解一些关于webpack配置的，可以参考网上这篇文章
documentation
它并不是关于webpack配置的要点，因此，不必要的时候不需要阅读
概括起来，你还需要知道：
和往常一样，也有例外：插件配置选项只在你需要部署的时候有用。我将在以后的指南中解释如何用插件实现最小化之类的功能，为了不错过需要加我的邮件。我将用免费提供ES6 cheatsheet的最佳期刊作为你发来邮件的回报！但是现在，让我们在给webpack配置加一些调整来结束。
获取ES6 Cheatsheet
感谢！请检查你的邮件中的cheatsheets链接
提示订阅的错误请重试
名
邮件地址
订阅我的简讯
让你的生活更轻松
1. 保存后自动重新加载页面
使用webpack-dev-server最大的优势是当文件发生改变它就通知浏览器。当然，如果你不监听这些通知也不会发生什么。但幸运的是webpack-dev-server包含一个方便且完备的脚本，当监听到通知的时候，将会为你重新加载页面。
关于脚本'webpack-dev-server/client?
http://localhost:8080'(http://localhost:8080'))的问题
)的问题). 为什么不试着根据你在上面学到的东西自己添加它呢?完成后，touch或hover在下面的空白框上，以获得答案。
entry: [
'babel-polyfill',
'./src/main',
'webpack-dev-server/client?http://localhost:8080'
],
2. webpack-dev-server的默认选项
当你想启动服务的时候输入并执行以下命令
$ webpack-dev-server --content-base src src/main.js
幸运的是，你可以通过在webpack.config.js添加devServer对象在中，来指定webpack-dev-server 的默认选项。这个对象中的key值，是那些您驼峰命名实现版本控制。
如果这有点拗口，别担心——你只需要知道你应该把这个添加到你的webpack.config.js:
devServer: {
contentBase: "./src"
}
然后您可以从上面的命令中省略-content-base的src。
3. 使用package.json记录依赖项和入口点
如果你知道package.json的工作原理，你可以跳过这部分.
