Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大部分通过 npm 来管理 loader。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。就可以通过require来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片

一：特性

（1）Loader 可以通过管道方式链式调用

每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。

（2）Loader 运行在 node.js 环境中，所以可以做任何可能的事情。

（3）Loader 可以通过npm发布和安装。

（4）Loader 可以接受参数，以此来传递配置项给 loader。

（5）插件可以让 loader 拥有更多特性。

（6）除了通过package.json的main指定，通常的模块也可以导出一个 loader 来使用。

（7）Loader 可以分发出附加的任意文件。

二：创建loader 模块

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。

（1）命名

loader 一般以xxx-loader的方式命名，xxx代表了这个 loader 要做的转换功能，

比如 json-loader。

（2）引用

引用 loader 的时候可以使用全名json-loader，或者使用短名json。命名规则和搜索优先级顺序在 webpack 的   resolveLoader.moduleTemplates   api 中定义。

Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

三：使用（demo）

例：在页面中引入一个CSS文件 style.css，

首先将 style.css 也看成是一个模块，

然后用 css-loader 来读取它，

再用 style-loader 把它插入到页面中。

1：创建一个style.css文件

2：修改入口文件entry.js

3.安装需要的loader 

npm install  css-loader   style-loader  

4.重新编译打包，刷新页面，就可以看到黄色的页面背景了。

以上是使用Loader的方法之一，也可以用以下的方式来实现：

如果   require  CSS 文件的时候都要写 loader 前缀，很麻烦。可以根据模块类型（扩展名）来自动绑定需要的 loader。

将 entry.js 中的  require("!style!css!./style.css")  修改为  require("./style.css")，然后执行：

$ webpack entry.js bundle.js --module-bind'css=style-loader!css-loader'

# 有些环境下可能需要使用双引号

$ webpack entry.js bundle.js --module-bind"css=style-loader!css-loader"

这两种使用 loader 的方式，效果是一样的。

四：配置文件（执行）

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行

（1）继续上面的案例，在根目录创建package.json，添加需要的依赖：

注意：

1.如果先创建好了package.json，并加好了依赖，那么直接npm install就好了

2.也可以直接在命令行里    npm install  xxx   --save-dev 这样也会安装成功，也会直接显示在package.json里面

（2）然后创建一个配置文件webpack.config.js

（3）简化   entry.js   中的  style.css   加载方式

（4）最后运行   webpack

可以看到 webpack 通过配置文件执行的结果和上而通过命令行

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

执行的结果是一样的。