本文主要讲如何快速写一个 webpack loader 和如何调试 webpack loader. 

01 背景 

webpack loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。

通常在前端面试中都会问到用了什么 loader 以及如何实现一个 loader, 以及 webpack loader 的加载顺序是什么。 

现在就让我们来梳理下整个流程。 

02 开始

loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 loader API，并通过 this 上下文访问。

如下文，我们写一个空的 loader, 

module.exports = source => {

    console.log(source);

    return source;

}

在 webpack.config.js 配置 loader, ./loaders/test.js

module: {

    rules: [{

        test: /\.js$/,

        use: [{

            loader: path.resolve('./loaders/test.js'),

            options: { }

            }]

        }]

}

运行 npx webpack, 就可以看到打印出每个 js 文件。 

03 如何调试 loader 

npx webpack 不好调试， 可以运行下面命令进行打包，

node ./node_modules/webpack/bin/webpack.js 

断点调试

node --inspect-brk ./node_modules/webpack/bin/webpack.js 

04 总结 

大家可以在这个基础上开发自己的 loader, 通常需要结合 AST 语法树进行开发。也可以写一些测试，例如 loader 是从上到下的，还是从下到上的，可以自己写 loader 看看效果就清楚了。 

后续有时间我会介绍的。