如何编写一个Loader

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

这是业务代码：

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

1. 为了方便使用，可以先下载个依赖

   npm install loader-utils --save-dev
   

2. 在根目录下创建loaders文件夹，里边比如创建一个replaceLader.js做loader解析

   

3. 代码如下：

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

4. 当然这样肯定是不行的，我们需要在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'
                    }
                }
            ],
        }
    ]
},