我们的笔记

分类： 工程化

  • webpack loader

    webpack 只能理解 JavaScript 和 JSON 文件。

    在 webpack 中，loader 用于对模块的源代码进行转换。可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。

    配置

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

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

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

    在以上例子中：

    1. 执行 sass-loader ：Sass 或 SCSS 文件编译成 CSS 代码。
    2. 执行 css-loader：解析第一步生成的 CSS 文件，将 CSS 代码转换成 JavaScript 模块；options: { modules: true } 启用 CSS 模块化功能，这意味着每个 CSS 文件都会被视为一个独立的模块，可以避免样式冲突。
    3. 执行 style-loader ：将 css-loader 处理后的 CSS 代码动态地插入到 HTML 页面的 <style> 标签中。

    特性

    • 链式调用：一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
    • loader 可以是同步的，也可以是异步的
    • loader 运行在 Node.js 中，并且能够执行任何操作
    • loader 可以通过 options 对象配置
    • 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
    • 插件（plugin）可以为 loader 带来更多特性。
    • loader 能够产生额外的任意文件。

    类型

    • loader: 核心的转换器，负责将源文件转换成 webpack 可以理解的模块。
    • preLoader: 在普通 loader 之前执行的 loader，主要用于预处理文件，例如代码检查（linting）。
    • postLoader: 在普通 loader 之后执行的 loader，主要用于后处理文件，例如优化或添加额外功能。

    执行顺序

    webpack 在处理模块时，loader 的执行顺序如下：

    1. preLoader
    2. loader
    3. postLoader

    举个例子

    preLoader 示例：ESLint 代码检查

    module: {
  rules: [
    {
      enforce: 'pre', // 指定为 preLoader
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        // eslint 配置选项
      },
    },
    // 其他 loader 配置
  ],
},

    postLoader 示例：添加版权信息

    • 创建一个自定义的 postLoader，在代码处理完成后，自动添加版权信息到 JavaScript 文件的顶部。
    //copyright-loader.js
module.exports = function(source) {
  const copyright = '// Copyright (c) 2024 Your Company\n';
  return copyright + source;
};
    module: {
  rules: [
    {
      enforce: 'post',  // 指定为 postLoader
      test: /\.js$/,
      exclude: /node_modules/,
      use:{
        loader:path.resolve(__dirname,'copyright-loader.js')
      }
    },
    // 其他 loader 配置
  ],
},

目录

→ 目录