webpack兼容js-关于新版webpackgulp兼容IE8的正确坐姿-

bendan520 webpack

2023-09-03 0 6,873 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

PS：不推荐这种方法，建议使用《webpack3编译兼容IE8-正确坐姿》

最近在使用webpack和gulp的时候，发现压缩后的js在IE8-下报各种错误，心里好难过。

于是花了几个小时才整理出问题和解决方案。

PS：webpack的es3ify-loader插件位于不同层次（优化层在解析层之后，比如压缩等），所以问题依然存在。

问题的核心

无论是webpack、gulp还是其他第三方压缩插件，基本上都是基于uglify-js来压缩代码webpack兼容js，所以问题的根本原因是uglify-js版本太高，导致不兼容IE8-.

其实问题的描述很简单，但是如何解决呢？

工具版本回滚（将gulp和webpack移回旧版本） gulp/webpack处理完毕后，使用旧版本uglify-js压缩并更改工具源码（这是找死！！！）基于的模块系统节点被绑架了（我觉得还不错）一时没想到……确定兼容版本

既然知道了问题的关键点，自然就去找兼容的版本了。

经过测试，最终确定uglify-js@2.6.4版本兼容IE8-。至于如何测试，最简单的方法就是使用下面的代码进行压缩测试。

var obj = {class: 'class'};

压缩后，如果是varobj={class:"class"}，则不兼容。如果是varobj={"class":"class"}则兼容。

疑难杂症针对性解决

我第一个想到的方法自然是版本回滚，因为这个方法最简单，但是项目中确实用到了。

例如gulp-uglify兼容1.5.4版本，webpack1兼容1.12.15版本。至于webpack2，就比较麻烦了。

以上就是gulp和webpack1的版本回滚方法，非常简单易用。

webpack2稳定版完全不兼容。我测试了各种版本，确定了2.1.0-beta.22版本。

但这还不是最终发布版本webpack兼容js，肯定不会用，那么如何破解呢？继续阅读下文。

webpack2 的模块绑架

因为节点模块是根据模块的绝对路径来缓存的，所以比较简单。

我们直接往里面写一个缓存，webpack就会加载我们的缓存，从而实现兼容。

这里就不解释模块加载原理了。如果您有兴趣，可以使用 devtool 或 vscode 来跟踪 require 行为。

第一步是安装 webpack 和 uglify-js@2.6：

$ npm i -D webpack uglify-js@2.6

第二步，绑架webpack中的uglify-js模块：

var path = require('path');

/** 利用模块缓存劫持 webpack 内部的 uglify-js **/
const uglifyJs = require('uglify-js');
const moduleUglifyJs = module.children.filter(m => m.exports === uglifyJs);
const key = path.join(__dirname, 'node_modules/webpack/node_modules/uglify-js/tools/node.js');
module.constructor._cache[key] = moduleUglifyJs[0];
/** 劫持完成 **/

const webpack = require('webpack');

// 这里正常使用
module.exports = {
  entry: './src/*.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
    }),
  ],
};