Webpack--自己写一个Loader

刺骨的言语ヽ痛彻心扉 2024-04-18 15:53 82阅读 0赞

先直接来看代码：

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'
        },
        module: {
        
            rules: [{
        
                test: /\.js/,
                use: [path.resolve(__dirname, './loader/replaceLoader.js')]
            }]
        }
    }

一般我们使用的Loader都是通过`npm`或者`yarn`安装的，那么配置的时候直接写Loader名即可，然而自己写的Loader则需要写绝对路径。

这里岔开一下，如果我们希望自己写的Loader也能直接通过Loader名的方式引用，只需要配置`resolveLoader`即可：

module.exports = {
        
        ...,
        resolveLoader: {
        
            modules: ['./node_modules', './loader']
        }
    }

上述配置的意思是当需要使用Loader的时候，先去`./node_modules`里寻找，找不到就到`./lodaer`目录里去找。

配置完成之后就可以打包了，没有问题的话就能看到打包生成的文件出现了我们希望的变化。  
![在这里插入图片描述][20190909113101205.png]

--------------------

我们在使用第三方Loader的时候，经常会通过`options`来为Loader进行一些配置，那么我们自己写的Loader该怎么接受并处理这些`options`呢？

首先现在配置文件里进行配置：

module.exports = {
        
        ...,
        module: {
        
            rules: [{
        
                test: /\.js$/,
                use: [{
        
                    loader: path.resolve(__dirname, './loader/replaceLoader.js'),
                    options: {
        
                        name: 'CSS'
                    }
                }]
            }]
        }
    }

上面的配置项为我们写的Loader传入了一个 `name` option。那么，我们可以在Loader之中，通过`this.query.name`得到我们传入的参数。

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

这样预期打包的结果就应该是`console.log('Hello CSS')`。

![在这里插入图片描述][2019090917423451.png]

--------------------

除了用直接return的方法，还可以通过`this.callback`来返回处理后的结果。

module.exports = function(source) {
        
        const result = source.replace('Webpack', this.query.name);
        this.callback(null, result);
    }

`this.callback`可以接受四个参数，分别是错误信息，处理后的结果，sourceMap，和一些额外信息。

--------------------

如果说希望在Loader里面执行一些异步的代码，则需要调用`this.async()`。

module.exports = function(source) {
        
        let result = null;
        const callback = this.async();
        setTimeout(()=>{
        
            result = source.replace('Webpack', this.query.name);
            callback(null, result);
        }, 1000)
    }

`this.async`返回的结果就是一个`this.callback`。

--------------------

之前我们是通过`this.query`来获取我们在配置文件中传入的配置项。而Webpack的官方文档推荐的是通过`loader-utils`这个库来获取。

const loaderUtils = require('loader-utils');
    
    module.exports = function(source) {
        
        const options = loaderUtils.getOptions(this);
        return source.replace('Webpack', options.name);
    }
    ```’

[20190909113101205.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5c8be0a5b78d47c9ba5ad04f68464de6.png
[2019090917423451.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/76d7a3ed7e464cbd97acb43e6b613d84.png