在上篇博客中我们通过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"