webpack Loader

Webpack 自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader 进行转换。

Loader 能够理解为是模块和资源的转换器，它自己是一个函数，接受源文件做为参数，返回转换的结果。这样，咱们就能够经过 require 来加载任何类型的模块或文件，好比 CoffeeScript、 JSX、 LESS 或图片。

先来看看 loader 有哪些特性？

• Loader 能够经过管道方式链式调用，每一个 loader 能够把资源转换成任意格式并传递给下一个 loader ，可是最后一个 loader 必须返回 JavaScript。
• Loader 能够同步或异步执行。
• Loader 运行在 node.js 环境中，因此能够作任何可能的事情。
• Loader 能够接受参数，以此来传递配置项给 loader。
• Loader 能够经过文件扩展名（或正则表达式）绑定给不一样类型的文件。
• Loader 能够经过 npm 发布和安装。
• 除了经过 package.json 的 main 指定，一般的模块也能够导出一个 loader 来使用。
• Loader 能够访问配置。
• 插件可让 loader 拥有更多特性。
• Loader 能够分发出附加的任意文件。

Loader 自己也是运行在 node.js 环境中的 JavaScript 模块，它一般会返回一个函数。大多数状况下，咱们经过 npm 来管理 loader，可是你也能够在项目中本身写 loader 模块。

按照惯例，而非必须，loader 通常以 xxx-loader 的方式命名，xxx 表明了这个 loader 要作的转换功能，好比 json-loader。

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

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

Loader 能够在 require() 引用模块的时候添加，也能够在 webpack 全局配置中进行绑定，还能够经过命令行的方式使用。

接上一节的例子，咱们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也当作是一个模块，而后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

/* style.css */ body { background: yellow; } 

修改 entry.js：

require("!style-loader!css-loader!./style.css") // 载入 style.css document.write('It works.') document.write(require('./module.js')) 

安装 loader：

npm install css-loader style-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 的方式，效果是同样的。