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 配置
  ],
},