webpack加载器(loader)

加载器是用于资源文件的转换。 加载器就是以资源文件作为入参并返回新的资源的函数（在Node.js中运行）。

例子

例如，您可以使用加载器告诉webpack加载CSS文件或TypeScript文件，并将之转换为JavaScript。 首先，安装相应的加载器：

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

其次，在你的webpack.config.js中配置匹配每个.css文件，并运用css-loader生成js资源，同理对.ts文件， 运用ts-loader`：

webpack.config.js

module.exports = {
  module: {
    rules: [
      {test: /\.css$/, use: ['css-loader'](/loaders/css-loader)},
      {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}
    ]
  }
};

注意，根据配置选项，应以以下规范使用相同的装载器：

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

配置

有三种方式在你的应用中使用加载器：

• 通过配置
• 在require语句中显式引入
• 通过 CLI

通过 webpack.config.js配置

module.rules 允许您在webpack配置中指定多个加载器。

这是一个简便的方式来配置加载器，并有助于你总览应用中每个加载器。

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

通过 require配置

通常指在 require 语句(或者 define, require.ensure, 等)中配置加载器。使用!将资源中的加载器分开， 每个部分相对于当前目录解析。

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

可以通过用整个规则前缀!覆盖配置中的任何加载器 .

可以使用查询参数传递选项, 就好像如web(?key=value&foo=bar)中一样。也可以使用JSON对象(?{"key":"value","foo":"bar"}).

使用 module.rules 只要有可能，因为这将减少你的源代码中的样板，并允许你调试，并且定位加载器出现问题更快。

通过CLI配置

或者,你也可以通过CLI安装加载器 :

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

上述脚本为.jade 文件配置了 jade-loader加载器, 以及为css文件配置了 style-loader 和 css-loader 加载器.

加载器特性

• 加载器是可以被串联的。就好像是个资源的管道（正如gulp的管道一样）。webpack会按时间顺序编译加载器链。 加载器链中的第一个加载器会将值作为给下一个加载器的输入。 在结束时，webpack最后返回JavaScript资源。
• 加载器可以是同步或异步的。
• 加载器在Node.js中运行，并且可以执行所有可能的操作。
• 加载器接受查询参数。 这可以用于将配置传递给加载器。
• 加载器也可以配置一个options对象。
• Normal modules can export a loader in addition to the normal main via package.json with the loader field.
• 插件可以给加载器提供更多特性.
• 加载器可以产生任何其他的文件.

装载器通过预处理JavaScript环境，提供更多的功能。
functions (loaders).用户现在有更多的灵活性来实现细粒度的逻辑，如压缩，包装，语言翻译以及更多...。

获得加载器

加载器符合标准模块协议。大多数情况下，你会从模块路径 下获得你的加载器 (比如npm install, node_modules).

如何编写加载器? 一个加载器模块需要用Node.js兼容的JavaScript编写一个可以export的方法。 在通常情况下，你用npm管理加载器，但你也可以在你的应用程序中直接使用js文件编写的加载器。

按照惯例, 加载器通常被命名为 XXX-loader, XXX 就是场下文的名字，比如说 json-loader.

加载器名称约定和优先搜索顺序由由webpack配置API中的resolveLoader.moduleTemplates定义。

下一篇：插件