4. Loaders

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

Loaders是编译器（transformations） ，作用在模块的源代码上。 当"require()"或"load"文件时，Loaders允许你预处理（preprocess ）这些（导入的或加载的）文件。因此，loaders有点像其他构建工具中的“tasks”，并且它提供强大的手段来处理前端构建的各个步骤。Loaders能将文件从不同的语言（比如TypeScript、JSX）编译成JavaScript，或以data URLs的形式内联图片。 Loaders甚至允许你在JavaScript中require() CSS文件。

Example

例如, 使用loaders告诉webpack加载一个CSS 文件，或将TypeScript转换为JavaScript。
首先，安装相应的loader：

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：

• via configuration
• explicit（指明） in the require statement
• via CLI

Via webpack.config.js

module.rules允许你在webpack 配置文件中指定多个loaders。这种方式使loader的显示变得简洁， 并且也能保持代码clean。通过这种方式你也能全面了解到各个loader：

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

后两种方式略。

Loader Features

• Loaders可以是链式的。它们被应用到资源管道中。一条loaders链被按时间先后顺序进行编译。loaders链上的第一个loader返回一个值给下一个loader。当运行到最后一个loader, webpack期望其返回的是Javascript。
• Loaders可以是同步的，也可以是异步的。
• Loaders在Node.js中运行，并且能做任何在哪里可以做的事情。
• Loaders 接受查询参数。这可以被用于向loader传入配置。
• 可以用一个选项对象（options object）来配置Loaders。
• 标准的模块（normal modules）可以暴露出一个loader，除了normal main via package.json with the loader field。
• Plugins 赋予loaders更多的功能。
• Loaders可以释放附加的任意文件。

Loaders allow more power in the JavaScript ecosystem(生态系统) through preprocessing(预处理) functions (loaders)。 现在用户有更多灵活性去引入细粒度（fine-grained）的逻辑，比如压缩、打包、语言翻译等。

Resolving Loaders（解析loader）

Loaders遵从模块解析的标准。在大多情况下，将从模块路径下加载。(think npm install, node_modules) 。

How to write a loader? A loader module is expected to export a function and to be written in Node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.

By convention(依据惯例), loaders are usually named as XXX-loader, where XXX is the context name. For example, json-loader.

The loader name convention and precedence search order is defined by resolveLoader.moduleTemplates within the webpack configuration API.

个人补充：

Rule.use的几种使用形式：

1. 仅有一个loader处理模块，且不设置options。

{
    test:/\.js$/,
    include:path.resolve(__dirname,"src"),
    exclude:path.resolve(__dirname,"node_modules"),
    use:"babel-loader"
}

2. 仅有一个loader处理模块，要设置options。

{
    test:/\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    use:{
        loader:"url-loader",
        options:{
            limit:10000
        }
    }
}

3. 有多个loaders处理模块，且都不设置options。

{
    test:/\.less$/,
    use:[
        "style-loader",
        "css-loader",
        "postcss-loader",
        "less-loader"
    ]
}

4. 有多个loaders处理模块，部分设置options。

{
    test:/\.css$/,
    use:[
        {
            loader:"style-loader"
        },
        {
            loader:"css-loader",
            options:{
                importLoaders:1
            }
        },
        {
            loader:"postcss-loader"
        }
    ]
}