由于 CSS 的花样越来越多（less，sass），JavaScript 也出现了 CoffeeScript 这样的变种，加上代码合并和压缩的需求，Webpack 作为整个大前端编译+载入的航母级产品应运而生，Webpack 的作者叫 Tobias Koppers，是个德国人
Webpack 可以处理的文件类型有上百种之多，第一眼看到的时候吓我一跳：
http://webpack.github.io/docs/list-of-loaders.html
优势：
- webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善
官方文档：
https://webpack.js.org/concepts/
一些接下去的 TODO：
https://docs.google.com/document/d/1tRc0MzvRdGK7EbG2LRW8vSyoxKhR_EvRUz3AQRyFZso/edit?pli=1
laravel-mix
laravel-mix is an elegant wrapper around Webpack for the 80% use case.
laravel-mix 对 webpack 做了封装，所以对于 laravel 用户来说，只需要看到配置就可以：
const { mix } = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
实际上 laravel 对于 webpack 的配置文件是在：
https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.config.js
laravel 官方文档中有详细的配置和使用说明：
https://laravel.com/docs/5.4/mix#custom-webpack-configuration
调试优化
webpack 自带的 devtool 参数是非常重要的帮助调试的配置：
教学视频：
https://www.youtube.com/watch?v=fGed9phNkto
官方文档：
https://webpack.js.org/configuration/devtool/
在配合 uglifyjs-webpack-plugin 使用的时候要注意：
When using the uglifyjs-webpack-plugin you must provide the sourceMap: true option to enable SourceMap support.
（后面等需要自己深入配置的时候，会再补充此份文档）
