loader 和 plugin 的区别？如何写一个自定义 loader？

区别：

• loader 是转换器，对匹配到的单个文件做内容转换（返回新源码字符串），链式的（从右到左执行）
• plugin 是扩展器，监听 Webpack 生命周期钩子做更全局的事（生成文件、注入变量、分包）

自定义 loader（本质是一个函数，接收源码返回转换后源码）：

// my-loader.js
module.exports = function (source) {
  // this 为 loader context，可拿到 query、emitFile 等
  return source.replace(/TODO/g, 'DONE')
}
// 使用：{ test: /\.js$/, use: ['./my-loader.js'] }

注意 loader 应是纯函数、无副作用，复杂逻辑用 this.async() 支持异步。

同分类其他题目