webpack自定義loader和plugins 簡單的理解

#自定義loader

比如說我們自己想寫一個打包之後將文件當中的console.log全部移除（官網有，這裏只是舉個例子），就可以自己寫一個移除console.log的loader，類似webpack的配置：

const staticPlugin = require('./staticChange')
rules: [

            {
                test: /\.js$/,
                use:[
                    {
                        loader:'./removeConsole'
                    },
                    {
                        loader:'babel-loader'
                    }
                ]
   
            },
            {
                test:/\.xd$/,
                use:[
                    {
                        loader:'./resolveXD'
                    }
                ]
            }
        ],
plugins:[
    new staticPlugin()
]

可以看出我們寫的removeConsole和babel-loader是類似的，那麼removeConsole是如何寫的？看如下代碼，很簡單，只是說明這個意思：

在removeConsole下建一個index.js,其實loader是一個導出的函數而已，重要的是那個context！

module.exports = function(context){
    var exp = /console.log\(.+?\)/g;
    return context.replace(exp,'');
}

有時候需要自定義語法，比如說解析.xd文件（純屬瞎寫，類似.vue之類的），比如說test.xd裏寫的是：

c(1);
a(1);

這是自創的語法，c代表console.log,a代表alert；然後在入口文件引入，需要寫一個loader解析這種語法，寫一個解析.xd的loader，新建一個resolveXD的文件夾，下面建一個index.js文件(webpack如上配置)：

module.exports = function(context){
    var callBack = this.async(); // 使用異步loader
    var _str = context.replace('c','console.log');
    _str = _str.replace('a','alert');
    callBack(null,_str)
}

loader的邏輯可能不會這麼簡單，具體可以看看別人寫的loader。

 

#自定義plugins

這裏寫一個把打包之後的文件當中的某些路徑替換的插件。例如把/static/   替換成線上的 www.baidu.com/static。

建一個文件夾staticChange，下面建一個index.js文件(webpack如上配置)：

const fs = require('fs');
const readFileAsync = require('util').promisify(fs.readFile);
const writeFileAsync = require('util').promisify(fs.writeFile);
class staticPlugin{
    apply(complier){
        complier.hooks.done.tap('changeStatic',(complition)=>{
            let context = complier.options.context;
            let path = context+'dist';
            complition.toJson().assets.forEach((ast)=>{
                readFileAsync(path+'/'+ast.name).then((cnt)=>{
                    cnt = cnt.replace(/\/static\/js/g,'www.baidu.com/static');
                    writeFileAsync(path+'/'+ast.name,cnt);
                })
            })
        })
    }
}
module.exports = staticPlugin;

注意apply是固定用法，插件的寫法可以參考官網。