记一次webpack4.x打包兼容ie8 的经历-CSDN博客

记一次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 环境调用了脚本，结果不出意外报错；

遇到了第一个问题：

缺少标识符

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

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

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

对象不支持此操作

既然报错是对象不支持该操作 ，那么就得断点分析，那个对象不支持操作，一顿断点，输出，发现是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 location
		port: 9000,
		host: '0.0.0.0',
		open: true
	},
	plugins: [new HtmlWebpackPlugin()]
};
复制代码