自定义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回调监听 我们完全可以完成 自动化部署中的上传代码