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

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

原文地址：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生态系统中贡献更多。用户现在可以更灵活的加入诸如压缩，大包，翻译等细分处理。

 

解析加载器

加载器依从标准的模块解析。多数情况下你讲从模块路径（想想npm install, node_modules）里得到加载器。

怎样去写一个加载器？一个加载器模块会输出一个函数，并且在Node.js下完成，兼容JavaScript。通常情况下用npm管理加载器，但是也可以在你的应用里以文件形式实现加载器。

按照惯例，加载器通常被命名为xxx-loader，xxx是上下文名。例如，json-loader。

加载器的命名约定和优先查找顺序被定义在webpack配置API resolveLoader.moduleTemplates里。

 

-- End --