记一次webpack4.x打包兼容ie8 的经历

写在前面

• 打包经历中没有用到Promise等语法，只用到了es6的一些语法书写逻辑
• webpack使用的是4.x ; babel 使用的是7.x
• 不一定适用于所有要兼容ie 8 的场景，请注意

背景：

因为公司功能项目需要，领导我书写了一个javaScript的程序，目的是暴露3个方法，能够调用相关的后台逻辑代码；

经历：

• 要求定下来了，那么接下来让我们开工;

  1. 打开Vscode；
  2. 初始化工程（npm init）
  3. 安装 babel、webpack、prettier 开发必备的三个工具 ，按照官网基础配置一下就好
  4. 开始撸代码；

• 我使用的包的版本为：

  "webpack": "^4.35.2"
  "@babel/core": "^7.5.0"
  "prettier": "^1.18.2"

就在我代码写完了在自测时候，被告知，需要兼容ie8 ，！！！

ie8 ！！！ ie 8！！！ ie8 ！！！………..您的好友已经阵亡；

抱着试试看的心态，我使用ie11 模拟了ie8 环境调用了脚本，结果不出意外报错；

遇到了第一个问题：

1. 缺少标识符

default 是ie8 的关键字，不能使用；

default 是ie8 的关键字，不能使用；

default 是ie8 的关键字，不能使用；

然后网上一通百度，找到了很多解决方案，例如：使用es3ify-loader，但是在webpack官网找了，并没有找到这个load，就很尴尬，在仔细看了看，帖子发现帖子中使用的webpack2；

后来........ ，又是一通找，最后在webpack 4版本找到了一个插件uglifyjs-webpack-plugin， 可以解决该问题，故配置起来，然后果然解决了问题【上官网配置图】：

1. 对象不支持此操作

既然报错是对象不支持该操作 ，那么就得断点分析，那个对象不支持操作，一顿断点，输出，发现是object.defineProperty，

查了些资料，发现object.defineProperty 在ie8 中存在，但是只用用于操作dom对象，难怪他会报错对象不支持该操作

然后又是开启各种查找解决方案：

​ 方案一、引入 es5-shim.min.js 和es5-sham.min.js 在入口文件的头部

​ 方案二、引入@babel/runtime 或者@babel/ployfil ，在入口文件引入

​ 方案三、检查压缩后的代码，看是否在混码过程中，有混码冲突的

都尝试了一下没有效果，【很是绝望。。。。】

后来，在google上找的时候，找了，一个npm包object-defineproperty-ie8

就抱着试试看的心态，安装并引入了工程，运行一下发现，居然可以了解决了报错

之后顺着npm的github的链接，找到了 写这几个包的作者，居然是大神司徒正美，立刻star 了一波，

感悟

• 明确自己使用的相关包的版本情况；例如我这次有遇到包是否兼容ie8， 在其中我一开始有用到 jquery的3.4版本，查阅资料后，发现jq的1.x才支持ie8
• 注意参考分析，是什么问题导致了ie的兼容报错，学会如何处理代码；例如；uglifyjs-webpack-plugin插件的参数配置，使得源码更加清晰
• 不能只看方案的步骤，而不看方案的起始；我在整个的过程中，有找到很多的方案，都是经历的一烦尝试发现不行，反过来看发现方案中webpack版本和我的根本不一样，
• 借鉴优秀的分析方式；我在尝试了很多方案配置不行之后，就慢慢开始，借鉴方案的分析思路，然后对比我现在所遇到的问题，看他是怎么解决的，然后在我的处境下，看是否有响应的方案，逐个分析解决；
• 百度搜索不到，就搭梯子上google； 大家都懂的

最终配置情况

• package.json

  "dependencies": {"expose-loader": "^0.7.5","jquery": "^1.12.0","object-defineproperty-ie8": "^1.0.1","underscore": "^1.9.1"},"devDependencies": {"@babel/cli": "^7.5.0","@babel/core": "^7.5.0","@babel/plugin-transform-modules-commonjs": "^7.5.0","@babel/plugin-transform-object-assign": "^7.2.0","@babel/preset-env": "^7.5.0","babel-loader": "^8.0.6","html-webpack-plugin": "^3.2.0","prettier": "^1.18.2","uglifyjs-webpack-plugin": "^2.2.0","webpack": "^4.35.2","webpack-cli": "^3.3.5","webpack-dev-server": "^3.7.2"}
  复制代码

• Webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = {mode: 'production', // "production" | "development" | "none"  // Chosen mode tells webpack to use its built-in optimizations accordingly.optimization: {minimizer: [new UglifyJsPlugin({sourceMap: true,exclude: /node_modules/,uglifyOptions: {ie8: true // 解决ie下的关键字default的问题}})]},entry: './index.js', // string | object | array  // 这里应用程序开始执行// webpack 开始打包output: {// webpack 如何输出结果的相关选项path: path.resolve(__dirname, 'dist'), // string// 所有输出文件的目标路径// 必须是绝对路径（使用 Node.js 的 path 模块）filename: 'mockSofaAPI.js' // string    // 「入口分块(entry chunk)」的文件名模板（出口分块？）},module: {// 关于模块配置rules: [// 模块规则（配置 loader、解析器等选项）{test: /\.js?$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env']],plugins: [['@babel/plugin-transform-modules-commonjs'],['@babel/plugin-transform-object-assign']]}}}]},context: __dirname, // string（绝对路径！）// webpack 的主目录// entry 和 module.rules.loader 选项// 相对于此目录解析target: 'web', // 枚举  // 包(bundle)应该运行的环境// 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)devServer: {contentBase: path.join(__dirname, 'dist'), // boolean | string | array, static file locationport: 9000,host: '0.0.0.0',open: true},plugins: [new HtmlWebpackPlugin()]
  };
  复制代码

参考资料:

Webpack4+Babel7+ES6兼容IE8：juejin.im/post/5cabf7…

这篇掘金朋友的文章，也给了我很大的启发，他指引我找到解决 ie 8 下default 关键字的处理方式，而且他的分析思路也很清新，一步一步，很是好，受益颇多，十分感谢

让Webpack+Babel支持IE8：www.maizhiying.me/posts/2017/…

这篇文章，然我知道了，关于webpack的插件uglifyjs-webpack-plugin的使用， 并懂的了，在茫茫的压缩代码中，可以通过配置插件的 美化和混码方式，来提升压缩后的代码的思路，另外，这个文章中的分析思路也很好，一步一步很是详细，受益颇多，十分感谢

uglifyjs-webpack-plugin插件：github.com/mishoo/Ugli…

其中有不少的参数配置和功能说明，很是详细，而且其中有不少关于代码压缩混码等的配置参数控制，可以通过配置，提升查找定位的问题的代码的方式，使得压缩后的代码可以调理更加清晰

object-defineproperty-ie8：github.com/RubyLouvre/…

这个是最后解决为ie8下的bject.defineProperty 问题的github地址，验证有效后，膜拜了一波作者，然后star

webpack：www.webpackjs.com/concepts/

很详细的官网

babel：babeljs.io/

很详细的官网