小虾虎鱼

小虾虎鱼

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

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

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

在webpack中使用UglifyJsPlugin压缩js后在IE8中存在问题

使用webpack打包js,并使用UglifyJsPlugin插件进行压缩js代码,用起来确实很方便。然而代码都打包压缩好后,放到ie8中测试页面功能不正常,打开控制台没发现有js报错,IE9中测试时OK的。取消uglify压缩代码在IE8中再测试是正常的,因此基本上可以确定问题是出在uglify压缩这里。

虽然知道了问题的所在,但找出问题并非易事。所以我直接将webpack升到2.0版本进行打包压缩,问题还是没解决(后来从GitHub上了解到webpack2.0不支持ie8,醉了,又降回了1.x版本)。

最后根据功能的不正常一步一步排查问题,初看压缩后的代码,可能跟我的写法相关,因为看到压缩后的变量有被覆盖,所以尝试修改代码的写法,最后还是解决了。

 2017/01/08 18:15 阅读全文 »