Q3 · Webpack

如何保证各个 loader 按照预想方式工作？

Webpackloader执行顺序

⚡ 速记答案（30 秒）

弄清执行顺序：use: ["style-loader", "css-loader"] → 从右到左/从后到前执行
利用 enforce: "pre" | "post" 区分前置/后置 loader（如 eslint-loader）
精确指定 test/include/exclude，避免错误匹配
通过日志、console.log、loader-utils 等调试 loader 输入输出

📖 详细讲解

Loader 执行顺序

从右到左

use: ['style-loader', 'css-loader', 'sass-loader']
// 执行顺序: sass-loader → css-loader → style-loader

Pitch 阶段

pitch: style-loader → css-loader → sass-loader
normal: sass-loader → css-loader → style-loader

enforce 控制顺序

enforce	执行时机
pre	最先执行
(默认)	正常顺序
post	最后执行

调试技巧

• 在 loader 中加 console.log

• 使用 loader-runner 单独测试

• 检查 this.resourcePath 确认文件匹配

💻 代码示例

loader 顺序配置示例

module.exports = {
  module: {
    rules: [
      // ESLint 前置检查
      {
        test: /\.js$/,
        enforce: 'pre',
        loader: 'eslint-loader',
      },
      // 正常处理
      {
        test: /\.scss$/,
        use: [
          'style-loader',   // 3. 插入 DOM
          'css-loader',     // 2. 处理 CSS 导入
          'sass-loader',    // 1. 编译 SCSS
        ],
      },
    ],
  },
};

💡

面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。