在学习webpack的过程中，有些内容如热加载，sourceMap，loaders感觉一直未能掌握。
尤其是在构建React的过程中，配置过程异常复杂，不得不使用脚手架来搭建React应用，可是脚手架并不十分方便。
翻看了若干博文和官网文档，有以下收获。
一 loaders:
为什么需要loaders：
如果没有loaders，webpack仅仅支持js文件的打包，图片，css，json等统统不认识。而plugins可以扩展webpack的更多功能。
常用的loaders有：
js，css，图片，json，文件。
1. js loaders:
1.1 babel-loader（ES6，React）
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中。
除此之外，用得最多的是解析ES6的babel-preset-env包和解析JSX的babel-preset-react包，这两个包一个用于解析ES6语法，另一个用来解析React的jsx语法。
（babel-preset-env是babel-preset-es2015和babel-preset-latest的升级版）
babel-preset简介
安装：
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
配置（以下可任选一种方式配置）
方式1：
放在webpack文件里配置
rules: {
[
test: /(\.jsx|\.js)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
]
}
方式2：
通过babel单独配置
//.babelrc
{
"presets": ["env", "react"]
}
注意：babel-loader比较耗费性能，所以要除去node_modules里的js文件
1.2 jsx-loader（React语法）
上述已经装了babel-preset-react就不再装这个loader了。
2.css loaders:
2.1 常用style-loader和css-loader
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
npm install --save-dev style-loader css-loader
2.2 less loader
配置less：
npm install --save-dev less-loader less
//注意：style-loader,css-loader,less-loader的顺序不能变，否则会解析不出来
{
test: /(\.css|\.less)$/,
use: [ 'style-loader', 'css-loader','less-loader'],
include: path.resolve(__dirname, 'src')
}
这个时候其实webpack还是不认识less，要把less导入到对应的js文件中，less才能和相应的js文件一起打包。
import './style/app.less';
二. plugins
HtmlWebpackPlugin 用于生成html模板
Hot Module Replacement（HMR） 实时刷新代码
三. devtool
实现代码映射。
四. devserver
实现本地服务器。
根据以上描述，就实现了一个支持React，ES6和less的基本的模板webpack文件。
github代码链接
欢迎留言互相学习。
参考文档：
webpack官网文档
webpack入门详解
webpack常用loders
webpack React解决方案
