饭要一口一口吃，路要一步一步走，webpack不能再稀里糊涂的拷来拷去了，先来了解一下常用的Plugins和Loaders
Loaders简介
用途
loader是webpack中一个重要的概念，它是指用来将一段代码转换成另一段代码的webpack插件。为什么需要将一段代码转换成另一段代码呢？这是因为webpack实际上只能处理JS文件，如果需要使用一些非JS文件（比如Coffee Script），就需要将它转换成JS再require进来。当然，这个代码转换的过程能做的远不止是Coffee->JS这么简单，比如编译Less/SASS/CoffeeScript，比如在页面中插入一段HTML，比如修改替换文本文件等等。
串联
loader是可以串联使用的，也就是说，一个文件可以先经过A-loader再经过B-loader最后再经过C-loader处理。而在经过所有的loader处理之前，webpack会先取到文件内容交给第一个loader。
1 | require('style!css!./style.css'); |
常用Loaders清单
style-loader
将css添加到DOM的内联样式标签style里
css-loader
允许将css文件通过require的方式引入，并返回css代码
less-loader
处理less
sass-loader
处理sass
postcss-loader
用postcss来处理CSS
autoprefixer-loader
处理CSS3属性前缀，已被弃用，建议直接使用postcss
file-loader
分发文件到output目录并返回相对路径
url-loader
和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
html-minify-loader
压缩HTML
babel-loader
用babel来转换ES6文件到ES5
Plugins简介
其实webpack的loaders和plugins都可以翻译成插件，但是plugin是比loader功能更强大的插件，能使用更多的wepack api。
常用Plugins清单
ProvidePlugin
提供类似jQuery的$全局变量
CommonsChunkPlugin
插件用法比较多，常用的是把一些不经常更改的公共组件合并压缩成一个common文件
ExtractTextPlugin
将CSS生产独立文件，不做内联
NoErrorsPlugin
报错停止打包但是不退出webpack进程
UglifyJsPlugin
压缩JS
HotModuleReplacementPlugin
代码热替换
HtmlWebpackPlugin
创建html文件，配合ExtractTextPlugin可以加入打包后的js和css
参考：
http://www.alloyteam.com/2016/01/webpack-use-optimization/
https://rhadow.github.io/2015/05/30/webpack-loaders-and-plugins/