对webpack的初步研究5

Loaders

加载器是应用于模块源代码的转换。它们允许您在处理import或“加载” 文件时预处理文件。因此，加载器有点像其他构建工具中的“任务”，并提供了处理前端构建步骤的强大方法。加载器可以将文件从不同的语言（如TypeScript）转换为JavaScript或内联图像作为数据URL。加载器甚至允许您import直接从JavaScript模块执行CSS文件等操作！

例如，您可以使用加载器告诉webpack加载CSS文件或将TypeScript转换为JavaScript。要做到这一点，您首先要安装所需的加载器：

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

然后指示webpack使用css-loaderfor each .css文件和ts-loader所有.ts文件：

webpack.config.js

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

module.rules允许您在webpack配置中指定多个加载器。这是显示加载器的简洁方法，有助于维护干净的代码。它还为您提供每个相应装载机的完整概述。

从右到左评估/执行装载程序。在下面的示例中，执行从sass-loader开始，继续使用css-loader，最后以style-loader结束。有关装载机订单的更多信息，请参阅“装载机功能”。

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

可以在import语句中指定加载器，或任何等效的“导入”方法。将资源与资源分开!。每个部分都相对于当前目录进行解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

可以通过为整个规则添加前缀来覆盖配置中的任何加载器!。

可以使用查询参数（例如?key=value&foo=bar，或JSON对象）传递选项，例如?{"key":"value","foo":"bar"}。

module.rules尽可能使用，因为这将减少源代码中的样板，并允许您在出现问题时更快地调试或定位加载程序。

您还可以通过CLI使用加载器：

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

这使用jade-loader的.jade文件，以及style-loader和css-loader对.css文件。

解决装载机

装载机遵循标准模块分辨率。在大多数情况下，它会从被载入模块路径（想想npm install，node_modules）。

加载器模块应该导出一个函数并用Node.js兼容的JavaScript编写。它们通常使用npm进行管理，但您也可以将自定义加载器作为应用程序中的文件。按照惯例，装载机通常被命名xxx-loader（例如json-loader）。请参阅“如何编写加载程序？”了解更多信息。