編寫一個webpack loader,loader的作用是獲取你寫的原始碼,根據自己的操作對原始碼的字元進行自定義的處理，相當於直譯器、翻譯器.

1、在入口檔案(webpack.config.js中的entry配置的js檔案)中寫如下程式碼

console.log('hello,vue');

2、接下來編寫一個loader，將console.log中的vue替換成react,專案根目錄下新建loaders資料夾,新建customLoader.js檔案，內容如下

module.exports = function (source) {
    return source.replace(this.query.name, 'react')    //這個this.query是webpack配置的loader option中的變數，這裡是vue；source指的是原始碼.
}

3、專案根目錄下新建webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    resolveLoader: {
        modules: ['node_modules', 'loaders']   //指的是在node_modules、loaders中查詢loader，loaders是自己配置的，可以自行修改
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: [
                    {
                        // loader: path.resolve(__dirname, './loaders/customLoader.js'),   //沒使用resolveLoader就需要使用path路徑
                        loader: 'customLoader',
                        options: {
                            name: 'vue'   
                        }
                    }
                ]
            }
        ]
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    }
}

4、打包，修改成功

擴充套件：如果想要在loader中使用非同步操作,需要使用async

4-1、customLoader.js 配置如下

module.exports = function (source) {
    const callback = this.async();   //返回一個this.callback
    setTimeout(() => {
        let result = source.replace(this.query.name, 'react');
        callback(null,result)   //第一個引數是報錯資訊，第二個是處理後的原始碼
    }, 5000);
}