webpack 如何编写一个 loader

Loader作用：打包一个类型文件或者模块

此loader作用替换js文件中的dell字符

cnpm init -y

cnpm install webpack webpack-ci --save

src 
    index.js
        console.log('hello dell')

webpack.config.js
    const path = require('path')

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

package.json
    scripts: {
        build: webpack
    }

loaders
    replaceLoad.js
        module.exports = function(source) { //不能为箭头函数一定要这个格式,参数为引入文件的原代码
            return source.replace('dell', 'xkl Lee')
        }

webpack.config.js
    module: {
        rules: [{
            test: /\/js/,
            use: [path.resolve(__dirname, './loaders/replaceLoader.js')]
        }]
    }

第二种写法 使用options来替换 js文件中的dell字符，this.query.name来获取options

webpack.config.js
    module: {
        rules: [{
            test: /\/js/,
            use: [
                {
                    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                    options: {
                        name: 'lee'
                    }
                }
            ]
        }]
    }


loaders	文件夹
    replaceLoad.js	文件
        module.exports = function(source) { //如果使用箭头函数this指向会出现问题
            console.log(this.query)
            return source.replace('dell', this.query.name)
        }

使用模块帮助分析传递进行的内容

cnpm install loader-utils --save-dev

loaders  文件夹
	    replaceLoad.js		文件
        const loaderUtils = require('loader-utils');

        module.exports = function(source) { //使用箭头函数this指向出现问题
            const options = loaderUtils.getOptions(this);//分析this中的内容赋给options
            return source.replace('dell', options.name)
        }

使用this.callback返回额外的参数

loaders  文件夹
    replaceLoad.js		文件
        const loaderUtils = require('loader-utils');

        module.exports = function(source) { //使用箭头函数this指向出现问题
            const options = loaderUtils.getOptions(this);//分析this中的内容赋给options
            cosnt result = source.replace('dell', options.name)

            this.callback(null//捕获的错误, result//参数, source//sourcemap, mata//额外的信息)
        }

在loader中做一些异步的操作 this.async

loaders
    replaceLoad.js
        const loaderUtils = require('loader-utils');

        module.exports = function(source) {  
            const options = loaderUtils.getOptions(this); 
            const callback = this.async()

            setTimeout(() => {
                const result = source.replace('dell', options.name);
                callback(null, result);
            }, 1000);
        }

目标先把dell替换为lee,再把lee替换为world,多个loader的使用

loaders 
    replaceLoader.js
        module.exports = function(source) {
            return source.replace('lee', 'world');
        }

    replaceLoaderAsync.js
        const loaderUtils = require('loader-utils');

        module.exports = function(source) {  
            const options = loaderUtils.getOptions(this); 
            const callback = this.async()

            setTimeout(() => {
                const result = source.replace('dell', options.name);
                callback(null, result);
            }, 1000);
        }

webpack.config.js
    module: {
        rules: [{
            test: /\/js/,
            use: [
                {
                    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                },
                {
                    loader: path.resolve(__dirname, './loaders/replaceLoaderAsync.js'),
                    options: {
                        name: 'lee'
                    }
                }
            ]
        }]
    }

另一个写法：

	    webpack.config.js
	        resolveLoader: {//当引入loader时，先去node寻找，否则去loaders文件夹下寻找
	            modules: ['node-modules', './loaders']
	        }
	        module: {
	            rules: [{
	                test: /\/js/,
	                use: [
	                    {
	                        loader: "replaceLoader",
	                    },
	                    {
	                        loader: "replaceLoaderAsync",
	                        options: {
	                            name: 'lee'
	                        }
	                    }
	                ]
	            }]
	        }

捕获业务错误可以在webpack 使用try catch实现
通过loader实现网址的国际化使用占位符
对业务进行包装那么就可以使用loader
文件资料： this的资料 webpack官网 api-》loader API