Remember a Webpack 4.x package compatible with IE8 experience

Writing in the front

The packaging experience doesn’t use syntaxes like Promise, just some es6 syntactic writing logic
Webpack uses 4.x; Babel uses 7.x
This may not be applicable to all ie 8 compatible scenarios, please note

Background:

As required by the company’s functional project, I was led to write a javaScript program with the purpose of exposing three methods that could call the relevant background logic code.

Experience:

The requirements are settled, so let’s get to work;
1. Open the Vscode;
2. Initialization project (NPM init)
3. Babel, Webpack, Prettier install the tools you need for Babel, Webpack, prettier, and prettier
4. Start coding;
The version of the package I use is:

“Webpack” : “^ 4.35.2” @ “Babel/core” : “^ 7.5.0” “prettier” : “^ 1.18.2”

When I finished writing the code, I was told that I need to be ie8 compatible!!

Ie8!!!!!! Ie 8!! Ie8!!!!!! …… . Your friend is dead;

Holding the mentality of trying, I use IE11 simulated IE8 environment to call the script, the result is no accident error;

Encountered the first problem:

Missing identifiers

Default is the keyword of Internet Explorer 8 and cannot be used.

Then I searched Baidu online and found a lot of solutions, such as using es3ify-Loader, but I found the load on webpack’s official website and didn’t find it, so I was very embarrassed. After a closer look, I found the webPack2 used in the post.

Later…… Uglifyjs-webpack-plugin (uglifyjs-webpack-plugin) is a plugin that can solve the problem in webpack 4.

Object does not support this operation

Object defineProperty: Object defineProperty: object defineProperty: object defineProperty: object defineProperty: object defineProperty

Object.defineproperty exists in IE8, but it is only used to manipulate DOM objects. No wonder object defineProperty does not support this operation

Then again, turn on various find solutions:

In scheme 1, introduce es5-shim.min.js and es5-sham.min.js in the head of the entry file

Add @babel/runtime or @babel/ployfil in import file

Scheme three, check the compressed code to see if there are mixed code conflicts in the process of mixing

Have tried to no effect, [is very desperate…]

Later, when I was looking on Google, I found an NPM package object- DefineProperty-IE8

With a try and see mentality, installation and introduction of the project, running found that it can solve the error

After following the link of NPM’s Github, I found the author who wrote these packages. It turned out to be A great god Named Seto Zheng Mei, who immediately became a star.

feeling

Know the version of the relevant package you are using; For example, THIS time I encountered whether the package is compatible with IE8. In the package, I used jquery version 3.4 at the beginning. After consulting the information, I found that JQ 1.x only supports IE8
Pay attention to the reference analysis, is what caused the IE compatibility error, learn how to deal with the code; For example; Uglifyjs-webpack-plugin plugin parameter configuration, make the source more clear
We should not only look at the steps of the program, but also at the beginning of the program; During the whole process, I found a lot of solutions, all of which were tired of trying to find that the solution did not work, and on the contrary, I found that the webpack version in the solution was completely different from mine.
Learn from good analytical methods; After I tried many solutions and failed to configure them, I started slowly, using the analysis ideas of solutions for reference, and then compared the problems I encountered to see how he solved them. Then, in my situation, I saw whether there were responding solutions and analyzed and solved them one by one.
Baidu search, on the ladder on Google; Everybody gets it

Final configuration

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." "
  }
Copy the code

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 // Solve the problem of the default keyword in IE}}})],entry: './index.js'./ / string | object | array / / application starts here
	// Webpack starts to pack

	output: {
		// How does WebPack output the resulting options

		path: path.resolve(__dirname, 'dist'), // string
		// The destination path of all output files
		// Must be an absolute path (using the Path module of Node.js)

		filename: 'mockSofaAPI.js' // string // File name template of Entry chunk.
	},

	module: {
		// About module configuration

		rules: [
			// Module rules (configures loader, parser, etc.)
			{
				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 (absolute path!)
	// Webpack's home directory
	// Entry and module.rules.loader options
	// resolve relative to this directory

	target: 'web'.// enumerate the environment in which bundles should run
	// Change chunk loading behavior and 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()]
};
Copy the code

References:

Webpack4+Babel7+ES6 Compatible with IE8: juejin.cn/post/684490…

This article of my gold-digger friend also inspired me a lot. He guided me to find the way to deal with the default keyword in IE 8. Moreover, his analytical thinking was very fresh, step by step, very good and benefited a lot

Let Webpack + Babel support IE8: www.maizhiying.me/posts/2017/…

In this article, HOWEVER, I know about the use of uglifyjs-webpack-plugin for webpack, and understand that in the vast compressed code, you can configure the beautification and mixing of plug-ins to improve the ideas of compressed code, in addition, the analysis ideas in this article is also very good. Step by step is very detailed, benefit a lot, thank you very much

Uglifyjs-webpack-plugin plugin: github.com/mishoo/Ugli…

There are a lot of parameter configuration and function description, it is very detailed, and there are a lot of configuration parameters control on the code compression mixed code, can be configured to improve the way to locate the problem of the code, so that the compressed code can be adjusted more clearly

Object-defineproperty-ie8:github.com/RubyLouvre/…

This is the github address that finally resolved the bject.defineProperty problem in IE8. After validation, it worred a bunch of authors, then star

webpack：www.webpackjs.com/concepts/

Very detailed official website

Babel: babeljs. IO /

Very detailed official website

Remember a Webpack 4.x package compatible with IE8 experience

Remember a Webpack 4.x package compatible with IE8 experience

Writing in the front

Background:

Experience:

feeling

Final configuration

References:

Related Posts

“Small Program Development” is about the specific configuration process of h5 embedded in wechat small program Web-view component

JavaScript Design Patterns and Development Practices, Part 3: The Open-closed Principle

Why is there a Symbol type in JavaScript?