Home >Web Front-end >Front-end Q&A >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
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.
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模块化知识
npm install babel-core babel-loader babel-preset-es2015 --save-dev #因为是开发测试环境,就加了dev,各自根据需要更改保存参数
#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
.babelrc
, set the transcoding rules{ "presets": [ "es2015" ], "plugins": [] }
module: { rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }] }
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!