在上篇博客中我们通过webpack将first.js和entry.js两个文件打包成了bundle.js，除此之外还可以通过引入其他的loader，处理各种类型的文件。
loader的介绍
Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片。
loader的特性：
- Loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript。
- Loader可以同步或异步执行。
Loader运行在node.js环境中，所以可以做任何可能的事情。 - Loader可以接受参数，以此来传递配置项给loader。
- Loader可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
- Loader可以通过npm发布和安装。
- 除了通过package.json的main指定，通常的模块也可以导出一个loader来使用。
- Loader可以访问配置。
- 插件可以让loader拥有更多特性。
- Loader可以分发出附加的任意文件。
loader使用
拿读取css文件举个栗子
安装用来读取css文件的css-loader
再用 style-loader 把它插入到页面中。
在命令行中输入：npm install css-loader style-loader --save-dev
然后检查下你的 package.json 文件看看是否发生了一下的变化：
"devDependencies": {
"css-loader": "^0.28.1",
"style-loader": "^0.17.0",
"webpack": "^2.5.1"
}
接下来我们新建一个css文件命名为style.css,内容为:
#app{
color: red;
}
下面我们要对entry.js进行一些添加修改：
require("!style-loader!css-loader!./style.css");
然后进行编译打包，命令号输入：webpack entry.js bundle.js
完成之后刷新我们的页面发现h1的标题变成了红色。
当然了，如果觉得每次require css文件的时候都要写loader和那么多的前缀！我们也可以采取以下这种方式：
require("./style.css")
在进行编译打包时候，命令行输入以下：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
