如何编写一个Loader

最新推荐文章于 2024-05-09 18:25:29 发布

原创最新推荐文章于 2024-05-09 18:25:29 发布 · 537 阅读

0 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何编写一个简单的字符替换Loader，通过示例代码展示了Loader的实现过程，并讲解了如何在webpack配置文件中添加和使用多个Loader。重点在于理解Loader的工作原理和配置方式。

比如我现在实现一个简单地字符替换的Loader，该怎么做？

这是业务代码：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVkrhUw5-1592838633564)(https://i.loli.net/2020/06/21/wVLN7SvMTUbaBAe.png)]

我要把Sun替换成别的字符：

为了方便使用，可以先下载个依赖
```
npm install loader-utils --save-dev
```
在根目录下创建loaders文件夹，里边比如创建一个replaceLader.js做loader解析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTwWuTCB-1592838633568)(https://i.loli.net/2020/06/21/p2nxXeZoHO3AlPm.png)]

代码如下：

const LoaderUtils = require('loader-utils')
module.exports = function (source) {
    const options = LoaderUtils.getOptions(this)
    return source.replace('Sun', options.name)
}

当然这样肯定是不行的，我们需要在webpack.config.js中进行配置

const path = require('path')
module.exports = {
	mode: 'development',
	entry: {
		main: './src/index.js'
	},
	devServer: {
		open: true,
		hot: true,
		port: 8888,
		contentBase: './dist'
	},
	resolveLoader:{
		modules:['node_modules','./loaders']
	},
	module: {
		rules: [
			{
				test: /\.js/,
                // 这块是我加载的lodaer文件
				use: [
					{
						loader: 'replaceLoader',
						options: {
							name: 'Sun.sir'	// 我要替换的字符
						}
					}
				],
			}
		]
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: '[name].js'
	}
}

异步返回laoder，在replaceloader.js中这样写

const LoaderUtils = require('loader-utils')
module.exports = function (source) {
    const options = LoaderUtils.getOptions(this)
    const callback = this.async()	//关键，通过this.async()来异步返回解析的结果
    setTimeout(()=>{
        const result = source.replace('Sun', options.name)
        callback(null,result)
    },1000)
}

如果我有多个loader文件，该怎么做呢,在webpack.config.js中的rulse里在添加对应的loader文件就可以了

module: {
    rules: [
        {
            test: /\.js/,
            use: [
                {
                    loader: 'replaceLoader',
                    options: {
                        name: 'Sun.sir'
                    }
                },
                {
                    loader: 'replaceLoaderAsync',
                    options: {
                        name: '我是异步loader'
                    }
                }
            ],
        }
    ]
},