Webpack的loader

最新推荐文章于 2024-07-26 10:07:45 发布

晟锐F2E

最新推荐文章于 2024-07-26 10:07:45 发布

阅读量456

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/JasonTanTJX/article/details/127837476

版权

想必很多前端的小伙伴在面试的时候都或多或少会被问到关于Webpack的各种“灵魂拷问”吧...请看官大大了解一波Webpack的loader。

Webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

loader

loader 用于对模块的源代码进行转换。 由于 webpack 只能理解 JavaScript 和 JSON 文件，loader 能让 webpack 去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

webpack拥有一个强大的能力，就是能够通过import导入任何类型的模块，例如.css文件

loader的两个重要属性

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。

来~上才艺↓ webpack.config.js

const path = require('path');
module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};
复制代码

上述配置对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这给webpack 编译器(compiler) 传达了以下信息：

在 require()/import 语句中被解析为 '.txt' 的路径时，在webpack对它打包之前，先 use(使用) raw-loader 转换一下。

切记！在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中。如果操作姿势不对，webpack 会给出警告哦~

使用正则表达式匹配文件时，请不要添加引号! /.txt$/ 与 '/.txt$/' 或 "/.txt$/" 不一样，前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 webpack 匹配具有绝对路径 '.txt' 的单个文件。

使用

注意在 webpack v4 版本可以通过 CLI 使用 loader，但是在 webpack v5 中被弃用。例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

npm install --save-dev css-loader ts-loader
复制代码

webpack.config.js

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

配置方式（推荐）：在 webpack.config.js 文件中指定 loader。

尽可能使用 module.rules，因为这样可以减少源码中样板文件的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。 module.rules 允许你在 webpack 配置中指定多个 loader。这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览：

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

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' }
        ]
      }
    ]
  }
};
复制代码

内联方式：在每个 import 语句中显式指定 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"}。

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 能够产生额外的任意文件。

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和更多其他特性。

解析 loader

loader 遵循标准模块解析规则。多数情况下，loader 将从模块路径加载（通常是从 npm install, node_modules 进行加载）。

我们预期 loader 模块导出为一个函数，并且编写为 Node.js 兼容的 JavaScript。通常使用 npm 进行管理 loader，但是也可以将应用程序中的文件作为自定义 loader。按照约定，loader 通常被命名为 xxx-loader（例如 json-loader）。更多详细信息，请查看编写一个 loader。