webpack入门教程之初识loader，二
上一节我们学习了webpack的安装和编译，这一节我们来一起学习webpack的加载器和配置文件。
要想让网页看起来绚丽多彩，那么css就是必不可少的一份子。如果想要在应用中增加一个css文件，那么webpack能不能处理呢？答案当然是可以。但是由于webpack只能本地处理JavaScript，因此我们需要css-loader来处理css文件，我们还需要style-loader在css文件中应用样式。
ps:css-loader会遍历css文件，找到url()表达式然后进行处理。style-loader会把原来的css代码插入到页面中的一个style标签中。
接下来，我们就来看一看如何使用css-loader和style-loader。
一、安装css-loader和style-loader
npm install css-loader style-loader
ps:需要本地安装，即安装到执行命令所在文件夹，因此不能带上-g。安装成功后，将会创建包含css-loader和style-loader的node_modules文件夹。
二、使用案例（依赖于第一节中的文件）
1. 新建style.css文件。
body {
background: yellow;
}2. 更新entry.js。
+ require("!style!css!./style.css");
document.write(require("./content.js"));4.重新编译然后刷新浏览器，将会看到页面增加了黄色背景。
ps:在经过loader加载器的处理之后，会将原文件转换成为一个JavaScript module。
5.如果不想写这么长的require("!style!css!./style.css")，我们可以为loader绑定文件扩展。成功后，就可以使用require("./style.css")来引用css文件。
首先我们更新entry.js。
+ require("./style.css");
document.write(require("./content.js"));接下来执行命令
webpack ./entry.js bundle.js --module-bind \'css=style!css\'
执行成功后，会看到同样的结果(部分环境需要使用双引号，若执行失败，可尝试将单引号替换成双引号)。
三、应用配置文件
1. 在命令后追加参数的方式显然过于麻烦，所以我们可以把配置都写到config文件中。创建webpack.config.js文件。
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};现在我们只需要执行webpack命令。执行后，webpack会尝试去在当前目录下查找webpack.config.js文件，并根据文件内容进行具体处理。
四、 美化命令行输出
编译可能会随着项目的增长而花费很长的时间。所以我们想要去查看编译的进度，或者给命令行增加一些颜色。
可以使用这个命令
webpack --progress --colors
五、监视模式
我们不想每次改变文件内容之后都去手动编译，可以使用
webpack --progress --colors --watch
webpack在编译中会缓存未改变的modules和输出文件。
在使用监视模式时，webpack会将文件监视器安装到编译过程中使用的所有文件。一旦检测到了任何改变，就会自动进行编译。当开启缓存时，webpack会将每个module保持在内存中，
对于没有改变的module进行重用。
六、开发服务器
开发服务器有利于提高本地开发的效率。
首先安装modules：
npm install webpack-dev-server -g
然后执行命令：
webpack-dev-server --progress --colors
执行完成后，将会在本地的8080端口上绑定一个很小的express服务。当bundle.js编译完成后，它将会自动更新浏览器页面，可以尝试使用浏览器打开
http://localhost:8080/webpack-dev-server/bundle查看执行结果。
ps：开发服务器使用webpack的监视模式，它还防止webpack将生成的文件发送到磁盘。相反，它保留并提供从内存生成的文件。
七、小结
到此为止，webpack的入门教程就算了告一段落了，接下来会带来进阶教程，敬请期待。