webpack loader

Webpack Loader 是用于在打包构建过程中处理文件的工具，它可以将文件转换为模块，以便在应用程序中使用。Webpack Loader 可以处理各种类型的文件，包括 JavaScript、CSS、图片、字体等，通过 Loader，我们可以实现对这些文件的预处理、转换、压缩等操作，以满足项目的需求。

webpack loader 原理

模块化加载：Webpack Loader 将输入的文件视为一个模块，通过模块化加载的方式将其加载到内存中。Webpack 会根据模块的路径匹配规则，寻找对应的 Loader，并将文件交给 Loader 处理。
链式调用：Webpack Loader 可以通过链式调用的方式组合使用，一个 Loader 的输出可以作为下一个 Loader 的输入，形成一个 Loader 链。在 Loader 链中，每个 Loader 负责对文件进行一定的处理，最终输出处理后的文件。
纯函数：Webpack Loader 应该是纯函数，即对于相同的输入，始终产生相同的输出。这样可以保证 Loader 的可靠性和可测试性，使得 Loader 在不同项目中的行为一致。
异步处理：Webpack Loader 支持异步处理方式，可以在处理过程中进行异步操作，例如读取外部文件、请求网络资源等。这样可以实现更复杂的文件处理逻辑，提高 Loader 的灵活性。
生成抽象语法树（AST）：对于 JavaScript 文件，Webpack 可能会将处理后的文件结果转换为抽象语法树（AST）。AST 是一个树状结构，代表了代码的语法结构，Webpack 可以通过分析 AST 来理解代码的含义，从而进行进一步的优化和处理。
模块依赖分析：Webpack 会分析处理后的文件结果中的模块依赖关系。对于 JavaScript 文件，Webpack 可能会解析 import、require 等语句，找出文件之间的依赖关系。对于其他类型的文件，Webpack 也可能会解析特定的语法或注释，找出文件之间的关联关系。
资源映射：Webpack Loader 可以生成资源映射关系，即原始文件与处理后文件之间的对应关系。通过资源映射，Webpack 可以跟踪文件之间的依赖关系，实现增量编译和快速构建。

综上所述，Webpack 在解析 Loader 处理后的文件结果时，会获取处理结果、应用其他 Loader 或插件、生成抽象语法树、分析模块依赖关系以及生成资源映射关系等步骤。这些步骤帮助 Webpack 理解代码结构、处理依赖关系，最终生成构建结果并进行后续的打包和优化操作。

webpack loader 执行过程

加载阶段：Webpack 根据模块的路径匹配规则，确定需要加载的文件，并将其加载到内存中。在加载阶段，Webpack 会根据模块的类型（例如 JavaScript、CSS、图片等）选择合适的 Loader，并将文件传递给 Loader 进行处理。
解析阶段：加载完成后，Webpack 将文件传递给 Loader，Loader 开始对文件进行解析。在解析阶段，Loader 会根据自身的处理逻辑，对文件进行一定的处理，例如转换、优化、压缩等操作。这个阶段是 Loader 执行其处理逻辑的主要阶段。
转换阶段：在解析阶段完成后，Loader 会将处理后的文件返回给 Webpack，Webpack 将处理后的文件添加到构建过程中。在转换阶段，Webpack 可能会继续进行其他 Loader 或插件的处理，对文件进行进一步的转换和优化。
输出阶段：最终，在所有 Loader 和插件的处理完成后，Webpack 将所有处理后的文件组合起来，生成最终的构建结果。在输出阶段，Webpack 将处理后的文件保存到指定的输出目录，并生成相应的资源映射关系，用于后续的应用程序运行。

总的来说，Webpack Loader 的执行步骤包括加载、解析、转换和输出等阶段，其中 Loader 在解析阶段发挥主要作用，负责对文件进行处理和转换，最终生成构建结果。这个过程是 Webpack 构建过程中的重要组成部分，Loader 的灵活性和功能丰富性，决定了 Webpack 构建过程的灵活性和扩展性。

webpack loader 主要用途

转换文件格式：Loader 可以将不同格式的文件转换为 JavaScript 模块，使得 Webpack 能够识别并处理这些文件。
预处理代码：Loader 可以在打包过程中对文件进行预处理，例如使用 Babel Loader 将 ES6/ES7 代码转换为 ES5，使用 TypeScript Loader 将 TypeScript 转换为 JavaScript 等。
代码优化：Loader 可以对代码进行优化，例如使用 UglifyJs Loader 压缩 JavaScript 代码，使用 PostCSS Loader 处理 CSS 前缀等。
处理静态资源：Loader 可以处理静态资源文件，例如使用 File Loader 将图片、字体等文件转换为 URL，使用 url-loader 将小图片转换为 base64 格式等。
实现自定义功能：Loader 允许开发者编写自定义 Loader，以满足项目的特定需求。通过编写 Loader，可以实现各种复杂的文件处理逻辑，例如按需加载、代码分割等。

Webpack Loader 的使用非常灵活，可以根据项目的具体需求选择合适的 Loader，并通过配置来实现各种文件处理操作。在 Webpack 的配置文件中，可以通过 module.rules 字段来配置 Loader，指定 Loader 的名称、匹配规则以及相关的配置选项。

常见的 webpack loader

代码转换：将不同版本的 JavaScript 代码（如 ES6/ES7）转换为 ES5，使得代码能够在各种浏览器上兼容运行。常见的 Loader 包括 Babel Loader、TypeScript Loader、CoffeeScript Loader 等。
样式处理：处理 CSS、Sass、Less 等样式文件，并将其转换为可以在浏览器中使用的格式。常见的 Loader 包括 style-loader、css-loader、sass-loader、less-loader 等。
文件处理：处理图片、字体等静态文件，使得它们可以在 Web 应用程序中引用并加载。常见的 Loader 包括 file-loader、url-loader、image-webpack-loader 等。
代码优化：对 JavaScript、CSS 等代码进行优化，如压缩、去除注释、代码分割等。常见的 Loader 包括 UglifyJsPlugin、OptimizeCSSAssetsPlugin、SplitChunksPlugin 等。
模板编译：处理 HTML、Markdown 等模板文件，使得它们可以在应用程序中使用。常见的 Loader 包括 html-loader、markdown-loader 等。
静态资源管理：处理 JSON、XML 等静态资源文件，使得它们可以在应用程序中使用。常见的 Loader 包括 json-loader、xml-loader 等。
代码检查：对代码进行语法检查、风格检查等，帮助开发者发现代码中的潜在问题并提高代码质量。常见的 Loader 包括 eslint-loader、stylelint-loader 等。
代码拆分：将代码拆分为多个模块，实现按需加载，减小应用程序的加载时间和体积。常见的 Loader 包括 bundle-loader、dynamic-import-loader 等。

编写 loader

参考: https://www.webpackjs.com/contribute/writing-a-loader/

安装依赖

$ npm install --save-dev jest babel-jest @babel/core @babel/preset-env

配置 babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

编写 loader

我们的 loader 将会处理 .txt 文件，并且将任何实例中的 [name] 直接替换为 loader 选项中设置的 name。然后返回包含默认导出文本的 JavaScript 模块：

export default function loader(source) {
  const options = this.getOptions();

  source = source.replace(/\[name\]/g, options.name);

  return `export default ${JSON.stringify(source)}`;
}

测试 loader

test/loader.test.js

/**
 * @jest-environment node
 */
import compiler from './compiler.js';

test('Inserts name and outputs JavaScript', async () => {
  const stats = await compiler('example.txt', { name: 'Alice' });
  const output = stats.toJson({ source: true }).modules[0].source;

  expect(output).toBe('export default "Hey Alice!\\n"');
});

webpack loader 原理​

webpack loader 执行过程​

webpack loader 主要用途​

常见的 webpack loader​

编写 loader​

webpack loader 原理

webpack loader 执行过程

webpack loader 主要用途

常见的 webpack loader

编写 loader