更新于2015年/11月/08 babel 6.0版本
仅仅是一个开发工具包？克隆压缩 webpack-black-triangle 或是 Unicorn Standard Starter Kit的工作原理
从ES2015 到es2016 已实现了大量压缩，并加入了很棒的特性，事实上，使用它并不能帮助你太多。问题是，虽然ES6是趋势，但是浏览器仍然停留在过去。想要验证的话，在Chrome浏览器控制台输入箭头函数，它将提示你：
当然，原因不仅如此，现在大多数浏览器都支持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，正常情况你会看到一个（不可移动的）黑色三角形，像下图这样
最小可行的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的两部分
第一 关于文件本身
webpack.config.js 是 node生成的正常的JavaScript文件，
你可以用node 引入模块，来检查环境变量
Webpack’s 配置对象中以文件导出，需要的时module.exports引入
接下来是，关于我们在配置对象中的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配置的要点，因此，不必要的时候不需要阅读
概括起来，你还需要知道：
entry 是脚本的入口位置
module.loaders 是放你编译代码的地方
和往常一样，也有例外：插件配置选项只在你需要部署的时候有用。我将在以后的指南中解释如何用插件实现最小化之类的功能，为了不错过需要加我的邮件。我将用免费提供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的工作原理，你可以跳过这部分.
最后一步是创建一个package.json，使用它有很多很好的理由，我不能一一列举，但这里有两个相关的理由:
你可以添加依赖(如. webpack & babel), 用npm install 安装他们
你可以定义一个起始脚本， 这样你就不需要记住webpack-dev-server使用npm start即可
创建package.json是如此的简单，你没有理由不去做它，因此，现在让我们在你的black-triangle目录中创建它，方式如下
npm init
现在按照提示输入src/main。作为你的入口点
现你已有属于你自己的package.json，如此的简单。让我们通过告诉npm，当我们输入npm start后应该做什么来结束它: 在package.json脚本文件中生成新的对象key，如下：
"start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js"
最后，关闭当前服务（如果服务运行）输入npm start并查看 localhost:8080来测试
通过输入npm start重新加载服务，如此简单的实现编译ES6
但是现在不要关闭标签。读过这篇文章后，你需要记住重要的部分，还有什么比做一个有用的练习更好的方法。
练习: 编译并监听 LESS/SCSS文件
这个练习范围小，但是结果显著。它只需要在webpack.config中添加两行js，当你将更改保存.less 或.scss 时，你会立即得到浏览器样式表的即时更新。
开始之前，你需要装一些依赖包
npm install style-loader autoprefixer-loader css-loader less-loader --save-dev
如果是这样情况，可以用less-loader代替scss-loader
一旦包已经安装，你需要对webpack.config.js进行两处改变
将新的loaders添加到module.loaders部分中的.less或.css行中。使用!使loaders相互连接的字符(更多参考文章(http://webpack.github.io/docs/loaders.html) )
在entry中添加新的stylesheet(是的，你可以在webpack中包含更多的JavaScript)
测试时，不要忘记在 index.html 中移出样式
确保你不会在这个练习中陷入困境——在10分钟左右的时间里，你可以自由地离开。 重要的是你要试一试。 你一旦尝试, 你可以看看我的解决方案，以及我是如何将整个项目连接在一起的，(https://github.com/jamesknelson/webpack-black-triangle)).
如何配置app来进行部署?
首先，要把它进行压缩. 然后, 您可能引入一些环境变量，以便在开发和生产中设置不同的API键。你需要提取CSS作为一个分开的文件, 并进行缓存. 这需要一些方法来修改你的src属性
译文出处：https://www.zcfy.cc/article/webpack-made-simple-building-es6-less-with-autorefresh