How does webpack convert es6 to es5 module?

Configuration method: 1. Use the import method to put the ES6 code into the packaged js code file; 2. Use the npm tool to install the babel-loader tool, the syntax is "npm install -D babel-loader @babel/ core @babel/preset-env"; 3. Create the configuration file ".babelrc" of the babel tool and set the transcoding rules; 4. Configure the packaging rules in the webpack.config.js file.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

The evil IE still needs to be filled with holes for thousands of years

• IE standards are far from the standards for html/css and even js, so generally A large part of the compatibility issues to be solved is to solve the incompatibility of IE. Although the currently popular ES6 grammar and specifications abandon the consideration of IE and give up the treatment of IE by default, IE compatibility is still a problem! Even though the usage rate of IE is less than 1% of the market.
• We use the comfortable ES6 specification but what if I have a headache? Webpack has developed a very powerful packaging conversion function: convert to ES5!

Come with any ES6 code

• Just write a let statement and traverse:

console.log("webpack 1");
let date = ["hello", "world", "this", "is", "es6", "code"];

((theDate) => {
    theDate.forEach(item => console.log(item));
})(date)

This is the result in Chrome browser

This is the result in Firefox browser:

This is the result of ie11 browser:

Not unexpected at all! Let's take a spin.

• Here we first make a modification, using the import method to move the ES6 code into the packaged js code file:
  Original index.js:

console.log("webpack 1");
let fun = () => {
    let date = ["hello", "world", "this", "is", "es6", "code"];
    date.forEach(item => console.log(item));
}
//fun() //结果依然刚才一样
export default fun;//es6导出函数，es6模块化知识

Can't find @babel/core Problem

• Previously installed plug-ins or toolkits required for packaging:

npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因为是开发测试环境，就加了dev，各自根据需要更改保存参数

• No Wrong, due to version compatibility issues, the latest 8.x version of babel-loader has changed its reading of babel-core, so we need to install the corresponding matching version:

#webpack 4.x | babel-loader 8.x | babel 7.x 最新版本
npm install -D babel-loader @babel/core @babel/preset-env
#webpack 4.x | babel-loader 7.x | babel 6.x 版本
npm install -D babel-loader@7 babel-core babel-preset-env webpack

• I use it here The version is 7.x:

• Create the configuration file of the babel tool: .babelrc, set the transcoding rules

{
    "presets": [
        "es2015"
    ], 
    "plugins": []
}

• webpack.config.js configuration packaging rules:

module: {
    rules: [{
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
    }]
}

• webpack execution, generate test.html

• Browser effect:

Chrome

IE

The code successfully ran on IE

• Let’s take a look at what the packaged converted es5 looks like

The conversion from es6 to es5 ends here.

【Related recommendations: javascript video tutorial, programming video】

The above is the detailed content of How does webpack convert es6 to es5 module?. For more information, please follow other related articles on the PHP Chinese website!