webpack 自定义loader

main.js 文件

function A() {
    console.log('hello world');
}

webpack.config.js 文件

const path = require('path'); 

module.exports = {
    entry: path.join(__dirname, './main.js'), 
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js' 
    },
    mode: "development",    

    
    resolveLoader: {
        modules: ['./node_modules', './loader']
    },
    //上述配置的意思是当需要使用Loader的时候，
    //先去./node_modules里寻找，找不到就到./loader目录里去找
    //这样我们就可以在下面的rules配置部分直接写loader文件名即可

    module: {
        rules: [ //这里用来写需要文件转换或者识别而采用的loader
            {

            }            
        ]
    },
};

./loader/lll-js-replace-loader.js 自定义的loader文件

//Webpack的官方文档推荐的是通过loader-utils这个库来获取配置文件中传入的配置项
const loaderUtils = require('loader-utils');

module.exports =  function (source) {
    let options = loaderUtils.getOptions(this); //获取配置文件传来的参数

    let resource = source.replace(/world/g,options.name); 
    //将要转换的文件中的所有world单词都替换成options.name，即配置文件传来的name参数值

    //this.callback可以接受四个参数，分别是错误信息，处理后的结果，sourceMap，和一些额外信息
    //这里最后可以写this.callback()函数也可以写return 来返回处理后的结果
    this.callback(null,resource);
}

让我们再回到webpack.config.js 文件中来，配置我们自定义的 loader

module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'lll-js-replace-loader',
                    options: {  
                        //传递过来的配置项 name,
                        //也就是说把要转换的文件中的所有world单词都转换为javascript
                        name: 'javascript'
                    }
                },
                exclude: /node_modules/
            }
        ]
    },

执行：

接着我们去看看生成的bundle.js文件输出的结果吧

成功实现！！