webpack5 学习系列 —— loader

最新推荐文章于 2023-07-27 10:15:51 发布

＊且听风吟

最新推荐文章于 2023-07-27 10:15:51 发布

阅读量889

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/HH18700418030/article/details/123261110

版权

webpack 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

loader 用于对模块的源代码进行转换。

loader 可以在 import 或 “load(加载)” 模块时预处理文件。

因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。

loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。

loader 甚至允许直接在 JavaScript 模块中 import CSS 文件！

示例：

使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。

首先，安装相对应的 loader：

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

然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：

webpack.config.js：

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

项目中实际应用：

webpack.base.js：

  module: {
    rules: [
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
      },
      {
        test: /\\\\\\\\.css$/,
        loader: "style!css"
      },
      {
        test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
        loader: "file"
      }
    ]
  }

使用 loader

在应用程序中，有两种使用 loader 的方式：

配置方式（推荐）：在 webpack.config.js 文件中指定 loader。
内联方式：在每个 import 语句中显式指定 loader。

注意：在 webpack v4 版本可以通过 CLI 使用 loader，但是在 webpack v5 中被弃用。

配置方式（Configuration）

module.rules允许在 webpack 配置中指定多个 loader。

这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。

同时可以对各个 loader 有个全局概览：

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。

webpack.config.js：

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

以上示例，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

内联方式

可以在 import 语句或任何与 “import” 方法同等的引用方式中指定 loader。

使用 ! 将资源中的 loader 分开。

每个部分都会相对于当前目录解析。

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

通过为内联 import 语句添加前缀，可以覆盖配置中的所有 loader, preLoader 和 postLoader：

使用 ! 前缀，将禁用所有已配置的 normal loader(普通 loader)

示例：
```
import Styles from '!style-loader!css-loader?modules!./styles.css';
```
使用 !! 前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）

示例：
```
import Styles from '!!style-loader!css-loader?modules!./styles.css';
```
使用 -! 前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders

示例：
```
import Styles from '-!style-loader!css-loader?modules!./styles.css';
```

选项可以传递查询参数，例如： ?key=value&foo=bar；或者一个 JSON 对象，例如： ?{"key":"value","foo":"bar"}。

尽可能使用 module.rules，因为这样可以减少源码中样板文件的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

loader 特性

loader 支持链式调用。

链中的每个 loader 会将转换应用在已处理过的资源上。

一组链式的 loader 将按照相反的顺序执行。

链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。

最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何操作。
loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。