教你手写一个简单的 webpack loader 与 plugin

最新推荐文章于 2025-03-12 09:36:42 发布

yolo0927

最新推荐文章于 2025-03-12 09:36:42 发布

阅读量3.7k

点赞数 1

分类专栏： webpack Node学习记录文章标签： webpack nodejs WEB前端

本文链接：https://blog.youkuaiyun.com/yolo0927/article/details/85017565

版权

本文档详细介绍了如何自定义webpack的loader和plugin。loader用于解析和转换文件，例如读取txt文件并将其内容转换为对象。plugin则通过编译过程中的钩子进行自定义操作，例如模拟htmlWebpackPlugin进行模板输出。通过本文，读者可以了解到创建这两个组件的基本步骤和工作原理，并提供官方文档链接供深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用了这么久 webpack 一直想简单的记录以下这篇博客来讲解如何手写自己所需的 webpack loader 和 plugin，说人话就是自定义 webpack 的加载器与插件，其实官方文档也有详细的记录，大家可直接查看官方文档都 ok 的
https://webpack.docschina.org/contribute/

loader

一、loader 是什么，有什么用

是 webpack 用于在编译过程中解析各类文件格式，并输出；
本质上就是一个 node 模块，通过写一个函数来完成自动化的过程；
由此我们就可以在开发模式下，通过解析各类前端无法解析的文件格式，然后将其解析后返回为对象或字符串供前端开发时使用，在 webpack 的编译过程中自动会将我们前端项目中引用的文件格式对应到指定 loader 解析后输出。

二、怎么写一个自定义 loader
接下来我将写一个非常简单的 loader 来解析 txt 文件，它将满足以下功能

读取 txt 文件内容并输出为一个对象，对象内包括文件内容与文件名
读取 webpack loader 选项，将内容中的 [name] 替换为我们选项 name 的值

      // webpack.config.js
      module.exports = {
   
        //...
        module: {
   
          rules: [
            {
   
              test: /\.txt$/,
              use: {
   
                loader: path.resolve(__dirname, './txt-loader.js'),
                options: {
   
                  name: 'YOLO'
                }
              }
            }
          ]
        }
      }

	// txt-loader.js
   var utils = require('loader-utils')

   module.exports = function (source) {
   
   const options = utils.getOptions(this)

   source = source.replace(/\[name\]/g, options.name)
     return `export default ${
      JSON.

最低0.47元/天解锁文章