前言
继续第一篇入门的教程，本片博客主要记录我学习webpack的一些配置。我平时要上课，因此更新的比较慢，抱拳了老铁！
loaders
使用不同的loader，webpack可以调用外部的工具，实现对不同格式的文件进行处理。比如，less和scss处理成css。或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
我们要使用loaders，要先独立安装，再在webpack.config.js里面配置，和上面的server一样，是组件嘛。
loaders的配置有以下几个方面：
- test——一个用以匹配loaders所处理的文件的拓展名的正则表达式（必须）
- loaders——用以处理文件的loaders的名字（必须）
- include/exclude——手动添加必须处理的文件（文件夹）/屏蔽不需要处理的文件（文件夹）
- query——为loaders提供其他的设置选项
（我参考的博客里，博主将Greeter.js里面的问候语放到了一个json文件中，但并没有解释为什么，我想的话也许后面有用，也许是模块化思想，我们照着做吧。）
1.在项目下 app文件夹下新增config.json文件，在里面输入：
2.再改变Greeter.js，在里面引用config.json里的文字！
（在这里注意一下，json的loaders在我这个版本已经不需要手动添加了。）
3.来啊来啊，运行啊
继续往下看，在了解如何使用loaders之前，先看一下Babel
Babel
Babel是什么？
一个编译javascript的平台
我们为什么要使用他？
有了它，你可以不用管浏览器是否支持最新的js语法（如ES6），
可以使用基于js的拓展语言（如JSX）
Babel的安装与配置
1.我们来安装一些Babel的常用的包（一次性，中间使用空格隔开）：
2.再在webpack.config.js中配置：
把新加入的代码贴出来，有点多，免得大家打错
module:{
rules:[
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
options:{
presets:[
"env","react"
]
}
},
exclude:/node_modules/
}]
}
（我参考的这篇博客，他安装了react并用来试验，但我不想那么麻烦，这里只验证es6的语法就能测验我们前面安装的loaders能不能起作用）
3.在app文件夹下新建Person.js
以es6的语法输入（这里为了检测es6解析能不能成功，react的解析，大家自己试试吧）：
4.修改main.js，这里只是新增来引入我们刚刚建的Person，以前的就不动他了
现在， 运行，可以了，解析es6成功！
一切皆模块
webpack将所有的文件都当做模块来处理，我对这句话的理解就是，就是将前端的css，js，fonts等都当做单独的模块来处理。
先学习第一块
css
样式表处理工具webpack给我们提供了两个，css-loader,style-loader，先安装
哦忘记说了，webpack会把css和js都打包到js文件中，不会生成单独的css文件，要进行一些适当配置。
现在我们来使用
1.先在webpack.config.js里进行配置（接着在之前配置babel的module的rules里）
照例贴出代码，免得大家打错
,{
test:/\.css$/,
use:[
{
loader:"style-loader"
},{
loader:"css-loader"
}
]
}
2.在app文件夹新建一个文件main.css，再对样式进行一些调整
由于这里只是试验一下，因此我们写简单点。给我们的div一个背景色。
3.接着在main.js中引入它
好我们运行一下
好了，有了一个非常sao气的背景。
上面说css也被当做一个模块来看待，再来看一下更加典型的css模块思想
css module
这是借鉴了js的奖整体复杂的代码分解成小部分，声明到各自依赖的部分。通过css模块能将css中的类名，动画名都只作用于当前模块，避免了代码的全局污染。这是css module的官方文档的链接
css预处理器
sass和less都是对css的拓展，但是浏览器并不能直接解析，通常我们都需要一个工具来将sass编译为css，现在我们使用webpack就可以完成，不需要我们手动去编译。
想让你的css实现更多功能
这里我们来尝试一下，为适应不同浏览器，给css添加前缀
1、安装postcss-loader与autoprefixer
npm install --save-dev postcss-loader autoprefixer
2、接着在webpack.config.js中css版块中进行配置
{
test:/\.css$/,
use:[
{
loader:"style-loader"
},{
loader:"css-loader",
options:{
modules:true
}
},{
loader:"postcss-loader"
}
]
}
3、在根目录新建postcss.config.js,并添加如下语句
4、重新打包