煦涵说JS(五):Webpack-IE低版本兼容指南

  Webpack,Webpack 是一个前端资本加载/打包对象,现在版本曾经 release 到 v2.6.1,明天的文章不支撑引见Webpack的API及应用,而是对比来项目开辟中应用Webpack打包时处理IE低版本(IE8及以下)浏览器兼容后果做一次总结。issue传送门,假设本文对你有协助,欢迎 star!

  煦涵说Webpack-IE低版本兼容指南

  PC端项今朝端基础技巧选型jQuery + ES6 + EJS + Babel + Webpack:

  * jQuery:供给选择器和ajax接口兼容支撑;

  * ES6:跟进前端趋势,便利向后兼容;

  * EJS:供给前端模板引擎支撑;

  * Babel:供给 ES6 转码支撑;

  * Webpack: 提高前端资本加载/打包;

  项目开辟过程都在 Chrome 浏览器中,一切都OK,没有任何后果,当在IE9以下浏览器中调试发明很多多少坑,现总结以下,以后新手参考。

  报错信息:

  对应代码:

  网上查找资料,webpack有一款loader插件es3ify-loader来处理ES3的兼容后果,修改webpack设备,后果处理,添加规矩以下:

  这个loader是干啥用的捏,就是把这些保管字给你加上引号,应用字符串的方法援用,请看实例:

  从新构建,在IE低版本浏览器预览,应用 压缩时,又报下面异样的毛病了,从新采取 beauty:true, build 发明引号被压缩掉落了,究其启事,研究了下uglify-js默许设备,发清晰明了 属性,添加build options以下,后果处理:

  从新构建,在IE低版本浏览器预览,应用 压缩时,又报下面异样的毛病了,报错代码:

  继续查找uglify-js设备,发明 ,修改build options,后果处理:

  编译后:

  从新构建,在IE低版本浏览器预览,报错信息以下:

  继续剖析压缩后代码,发明照样uglify-js后果,其mangle 设备属性 默认为 true, 甚么意思捏,意思就是把支撑IE8的代码clear掉落,screw you=> 去你的,修改压缩设备项,从新编译,后果处理:

  在 webpack 的 entry 进口文件top引入 后果处理

  在 webpack 的 entry 进口文件top引入 后果处理

  在 webpack 的 entry 进口文件top引入 后果处理

  这个case 应当说是最难弄的一个case了,耗时也比拟长,关键点在于应用 /也有后果,检查你官网发现在低版本浏览器也会有后果,官网刻画以下:

   Object.defineProperty

  In the worst of circumstances, IE 8 provides a version of this method that only works on DOM objects. This sham will not be installed. The given version of defineProperty will throw an exception if used on non-DOM objects.