[译]webpack官网文档：概念 -- 4.加载器

hzzyli

2017-03-08

关注关注

原创翻译，转载请注明出处。

原文地址：https://webpack.js.org/concepts/loaders/

加载器是应用于你的应用里源代码，实现转换。它们是函数（运行于Node.js），用源文件作为参数，生成新文件。

例子

例如，使用加载器来告诉webpack加载CSS文件，或者把TypeScript转换为Javascript。

首先，安装对应的加载器：

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

然后，在webpack.config.js里进行配置，对每一个.css文件使用css-loader，类似的对.ts文件使用ts-loader。

module.exports ={
  module:{
    rules:[
      {test:/\.css$/, use: 'css-loader'},
      {test:/\.ts$/, use: '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.ensuse等等）。用!（叹号）分割出加载器，每一个部分都是相对于当前目录被解析。

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

规则整体加前缀!（叹号），就可以覆盖在配置里定义的任何加载器。

选项可以通过查询参数来传递，就像在互联网上（?key=value&foo=bar）。还可以使用json对象（?{"key":"value","foo":"bar"}）。

通过CLI

还有一种选择，你可以通过CLI使用加载器。

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

对.jade文件使用jade-loader，对.css文件使用style-loader和css-loader.

加载器的特性

加载器可以链式使用，他们被适用于对应源代码的管道里。按照先后顺序来编译一个加载器链。加载器链里第一个加载器返回一个值给下一个加载器。Webpack期待最后一个加载器返回JavaScript。
加载器可以是同步的，也可以是异步的。
加载器运行在Node.js中。所以Node.js里可以实现的加载器都可以实现。
加载器接受查询参数，这可以被用作想加载器传递配置内容。
加载器还可以使用options对象来配置。
标准模块可以通过package.json的loader字段导出一个除了标准main之外的加载器。
插件可以给加载器提供更多特性。
加载器可以生成额外的任意文件。

加载器通过预处理函数（加载器）可以在JavaScript生态系统中贡献更多。用户现在可以更灵活的加入诸如压缩，大包，翻译等细分处理。