4.Loader
4.1 loader 用于对模块的源代码进行转换,使你在 import 或"加载"模块时预处理文件:
1 可以将文件从不同的语言（如 TypeScript）转换为 javascript语言;
2 或将内联图像转换为 data URL。
因此，loader 可以说是向我们提供了处理前端构建步骤的强大方法。
其次，使用 loader 之前需要先加载相对应的转换器（即loader），然后 webpack 会根据配置加载可以处理的文件，比如遇到每个 .css时使用 css-loader，遇到所有 .ts 文件时使用 ts-loader等。
4.2 loader 的使用方法大致有三种：
-
- 配置：在 webpack.config.js 文件中指定 loader，这是推荐使用的方法。
- 内联：在每个
import语句中显式指定 loader。如import Styles from ‘style-loader!css-loader?modules!./styles.css‘;中间的“！”是用于分隔开各个loader - CLI：在 shell 命令中指定它们。如
webpack --module-bind jade-loader --module-bind ‘css=style-loader!css-loader‘，这里对.jade文件使用jade-loader，对.css文件使用style-loader和css-loader
4.3 loader的特性
-
- loader 能够对资源使用流水线(pipeline)进行链式传递。即一组链式的 loader 的编译顺序是顺序的，链中的前一个 loader 返回值给下一个 loader。传递到最后一个 loader时，返回 JavaScript。
- loader 可以是同步/异步的。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收用于对 loader 传递配置的查询参数。
- loader 能用
options对象配置。 - 可以使用
package.json常见的main属性，也可以在package.json里定义一个loader字段来将普通的 npm 模块导出为 loader。 - 使用插件(plugin)可以为loader带来更多特性。
- loader 可以产生非标准配置文件的任意文件。
（loader）预处理函数为 JavaScript 生态系统提供了更多可能和变化。用户可以更加灵活地引入细粒度逻辑，如压缩、打包、语言翻译等。
4.4 loader的解析
遵循标准的模块解析，loader 将从模块路径（通常认为模块路径是 npm install, node_modules）解析。
loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。通常使用 npm 进行管理，也可将自定义 loader 作为应用程序中的文件。
命名约定：loader 被命名为 xxx-loader（例如 json-loader）。
更多信息请看如何编写 loader？。