手拉手帶你寫個自己的loader和plugin

自定義loader

根目錄下  新建 loader文件夾 裏面 寫個  lader  js用默認的 index

const loaderUtils = require('loader-utils');
module.exports = function(source) {
    // source 爲 compiler 傳遞給 Loader 的一個文件的原內容
    // 該函數需要返回處理後的內容，這裏簡單起見，直接把原內容返回了，相當於該 Loader 沒有做任何轉換
    const options = loaderUtils.getOptions(this);
    console.info(options)

    return source;
};

裏面暫時放這些代碼   source 就是 掃描的文件  option 就是  你webpack裏配置的 options 如 下圖

還有就是  要修改下 頁面掃描laoder的地方  你可以單獨指定 也可以 指定掃描文件夾  我就 直接 全局 添加掃描laoder的地址了

ok  完事就位    看看結果 代碼順利執行  不過  這裏確走了4遍  暫時未查到原因  後續補上

 

自定義plugin

新建文件夾 起名 gqPlugin  內容是

const fs = require("fs")
const path = require("path")
function gqPlugin(options) {
    // 使用 options 設置插件實例……
    console.info('高強的plugin')
    console.info(options)
}

gqPlugin.prototype.apply = function(compiler) {
    compiler.plugin('done', function() {
        console.log('打完包了 小b');
        const dir = path.join(__dirname,"../../dist/")
        const result = fs.readdirSync(dir)
        console.info(result);
    });
};

module.exports = gqPlugin;

在 webpack 引入

//  引入
const gqPlugin = require('./plugin/gqPlugin');


// 在plugin 裏 實例化
new gqPlugin({name:'gq'})

運行代碼 看效果

代碼運行了   方法內代碼已經走了  並且已經監聽了 webpack打包結束後的內容  打印出了 我們打包後的代碼目錄 

到這裏  我們自己的plugin 也結束了  利用這個done的webpack回調監聽  我們完全可以完成  自動化部署中的上傳代碼