学习 webpack 之 loader 讲解

2024-08-04 16:01:59

为什么出现loader

webpack 只能处理 .js 和 .json 类型文件，对于其他类型，无法处理。webpack 为了解决这个问题，出现了loader机制。

loader机制，让 webpack有了处理其他类型文件的能力。

什么是loader

loader其实就是一个内容转换器，将webpack不能识别的文件，转换为标准的js模块，交给webpack处理。

loader的本质是一个导出（export）一个函数的JavaScript模块。

loader函数中this指向loader上下文，在上下文中包含一些方法或者属性，比如同步loader中的callback、异步loader中async方法等。

/**
 * content：文件内容
 * map：sourcemap相关的数据
 * meta：元数据，可以是任何内容，上一个loader传递过来的数据
 */
module.exports = function(content, map, meta) {
    return content;
}

loader使用方式

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

配置方式（推荐）：在 webpack.config.js 中指定 loader 。
內联方式：在每个 import 中显示指定loader。

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

1. 配置方式

module.rules 允许你在 webpack 配置中指定多个 loader。这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。

loader 从右到左（或从下到上）执行。执行顺序：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" },
        ],
      },
    ],
  },
};

2. 内联方式

webpack允许在 import 语句中指定loader。使用 ! 将资源中的 loader 分开。

具体用法：

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

每个loader之前同 ! 隔开，允许携带query参数，最后的模块也使用 ! 隔开。

inline loader 可以通过添加不同的前缀，跳过其他类型loader。

通过为内联 import 语句添加不同的前缀，可以跳过配置（webpack.config.js）中的所有 noraml loader、preLoader 和 postLoader：

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

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

使用 -! 前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders

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

使用 !! 前缀，将禁用所有已配置的 loader（preLoader, normal loader, postLoader）

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