Loaders¹

Loaders是作用在你的应用资源文件上的转换。它们是以资源文件的内容为参数，返回新的内容的函数（运行在Node.js中）。

样例

比如，你可以使用loaders来告诉webpack如何加载CSS文件，或者如何转换TypeScript为JavaScript。首先安装对应的loaders：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后配置你的webpack.config.js，为每一个.css文件使用css-loader，类似的，为每一个.ts文件使用ts-loader：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'},
      {test: /\.ts$/, use: 'ts-loader'}
    ]
  }
};

注意根据配置选项，下面的参数定义了相同的loader使用：

{test: /\.css$/, loader: 'css-loader'}
// or equivalently
{test: /\.css$/, use: 'css-loader'}
// or equivalently
{test: /\.css$/, use: {
  loader: 'css-loader',
  options: {}
}}

Configuration（配置）

在你的应用中有三种方法使用loaders：

• 通过配置
• 通过require显式地声明
• 通过CLI

通过webpack.config.js

module.rules允许你在webpack配置中指定若干个loaders。这种使用方式展示简洁，能保持代码干净，也能让你对各个loader有全面的概览。

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

通过require

可以通过require声明（或者define，require.ensure等）来指定loaders。用!分开loaders和资源。每个部分都相对于当前目录进行解析。

require('style-loader!css-loader?modules!./styles.css');

通过给整条规则加!前缀来覆盖webpack配置中的任何一个loader也是可以的。

选项可以通过查询参数（Query Parameter）传递，跟web中使用一样（?key=value&foo=bar）。也可以使用一个JSON对象（{"key":"value","foo":"bar"}）。

ℹ️尽可能使用module.rules，因为它能减少你源代码中的样板代码，出问题时也能让你更快的调试或定位到一个loader。

通过CLI（命令行）

可选的，你也可以从命令行使用loaders:

webpack --module-bind jade --module-bind 'css=style!css'

这将会为.jade文件使用jade-loader，为.css文件使用style-loader和css-loader。

Loader的特性

• Loaders可以链式使用。它们会像一个管道应用在资源文件上。一个Loaders链会按顺序地编译。链中的第一个loader返回值给下一个loader。在最后一个loader，webpack期望返回JavaScript。
• Loaders可以是同步的或异步的。
• Loaders在Node.js运行，在其中可做任何允许的事。
• Loaders接受查询参数。参数可以用来传递配置给loader。
• Loaders也可以通过一个options对象配置。
• 一般模块通过package.json，除了可以导出常规的main字段外，也可以通过loader字段导出一个loader。
• Plugins可以赋予loaders更多的特性。
• Loaders可以发表任意额外的文件。

Loaders（预处理函数，preprocessing functions）赋予了JavaScript生态圈更强大的能力。现在，用户有更多灵活性来添加细微的逻辑，比如压缩，包装，语言翻译或更多。

解析Loaders

Loaders遵从标准的模块解析。大部分情况下你都会从模块路径（想想npm install，node_modules）中引用loaders。

如何编写一个loader？一个loader模块应当导出一个函数，而且应当用Node.js兼容的JavaScript编写。通常你可以用npm管理loaders，但loaders也可以以文件形式存在应用中。

根据规范，loaders被命名为XXX-loader，XXX是指上下文。比如json-loader。

Loader名称规范和搜索优先顺序通过webpack配置API中的resolveLoader.moduleTemplates定义。

¹. https://webpack.js.org/concepts/loaders/ ↩