小虾虎鱼

小虾虎鱼

webpack2自定义插件修改输出的内容

作者 禾惠 发表于 2017/07/18 21:25 ,最后修改于 2017/07/18 21:31

前几年火爆的seajs如今慢慢的要被淘汰了,随着webpack出来后,seajs和requirejs都逐渐的被取代了。 最近一个老的项目要增加一个比较复杂的功能,如果按照以前的写法,这个功能写完后这个js文件应该有过千行代码(曾经很以为荣的写过千行代码的js文件,现在回头看看就是挖坑)。为了使代码更容易阅读,就用上了webpack。 由于项目是前两年用seajs写的,那么打包出来的内容必须是这样的:

define(function(require,exports,module){
    /// ... 代码
});

如果直接在入口文件里面这样写:

define(function(require,exports,module){
    /// ... 逻辑代码
});

最后打包出来的requireexportsmodule这些参数名会被替换掉(使用了Ugilifyjs压缩),最后seajs就不能识别了。在网上没有找到好的方法处理webpack打包出来的js文件兼容seajs,于是看了一下webpack编写自定义插件的文档,发现是可以处理的。处理方法如下(注意这里使用的是webpack 2.x版本):

/// 适合webpack 2.x版本
const RawModule = require("webpack/lib/RawModule");

function MergeJSPlugin() {

}

MergeJSPlugin.prototype.apply = function (compiler) {
    compiler.plugin("emit", function (compilation, callback) {
        let filename = compilation.outputOptions.filename;
        let assets = compilation.assets;
        let mini = assets[filename].source();
        let str = `define(function(require,exports,module){${mini};module.exports=mycode;})`;
        assets[filename] = (new RawModule(str)).source();
        callback();
    });
};

这样就可以实现webpack自定义插件修改打包后的内容。代码中的RawModule是webpack 2.x自带的模块。

我欣赏你的好品味~

打开支付宝扫一扫