Webpack--自己写一个Loader

最新推荐文章于 2024-07-02 21:45:00 发布

Meskjei

最新推荐文章于 2024-07-02 21:45:00 发布

阅读量680

点赞数 2

分类专栏：前端 Webpack 文章标签： Webpack Loader

本文链接：https://blog.csdn.net/hjc256/article/details/100656579

版权

本文介绍了如何创建一个简单的Webpack Loader，该Loader将源代码中的'Webpack'替换为'JavaScript'。重点在于Loader函数的声明方式、在Webpack配置中的引用以及如何处理配置参数。通过配置module.rules，可以指定Loader的查找路径。当需要传递参数给Loader时，可以在配置中定义，并在Loader内部通过this.options获取。对于异步操作，需要使用回调函数或者Promise来处理。

摘要由CSDN通过智能技术生成

先直接来看代码：

module.exports = function(source){
   
    return source.replace('Webpack', 'JavaScript');
}

这三行代码就实现了一个最简单的Loader，它的作用是将源码中出现的所有’Webpack’替换成’JavaScript’。

参数source就是所处理的文件的代码，是一个字符串。

所导出的函数必须是使用function关键字声明的，不可以使用箭头函数，因为Webpack会修改函数的this，而箭头函数没有自己的this，所以可能会出错。

写好的Loader就可以在配置文件中引入使用：

const path = require('path');
module.exports = {
   
    mode: 'development',
    entry: {
   
        index: './src/index.js'
    },
    
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'