手拉手带你写个自己的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回调监听  我们完全可以完成  自动化部署中的上传代码