学习笔记《Webpack》

由于 CSS 的花样越来越多（less，sass），JavaScript 也出现了 CoffeeScript 这样的变种，加上代码合并和压缩的需求，Webpack 作为整个大前端编译+载入的航母级产品应运而生，Webpack 的作者叫 Tobias Koppers，是个德国人

Webpack 可以处理的文件类型有上百种之多，第一眼看到的时候吓我一跳：
http://webpack.github.io/docs/list-of-loaders.html

优势：

1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善

官方文档：
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.

（后面等需要自己深入配置的时候，会再补充此份文档）