The following describes how to use webpack with babel to convert es6 to an ultra-simple instance of es5 and webpackes5.

The following describes how to use webpack with babel to convert es6 to an ultra-simple instance of es5 and webpackes5.

Today, I got started with webpack. The first time I used webpack for transcoding, it turned out to be a bit confusing. Haha.

The process is attached below

Create folders and initialize them. First, install webpack globally.

npm install webpack --save-dev 

Then install babel

npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 

Execute the installation in the current folder, and then create two folders: src as the source folder and bin to save the list of generated folders.

Create an app. js file in the src folder and write es6 code that is not fully supported by the browser.

let a = 111; let b = 222; var xxx = (c,d) => c*d; console.log(xxx(a,b)); 

Create a file named webpack. config. js in the root directory.

module.exports = {   entry: './src/app.js',   output: {     path: './bin',     filename: 'app.bundle.js',   },   module: {     loaders: [{       test: /\.js$/,       exclude: /node_modules/,       loader: 'babel-loader'     }]   } } 

Then create a file called by babel named. babelrc.

Write in

{ "presets": [ "es2015" ] } 

Then open cmd in the current directory,

Run the webpack command.

If a green image is displayed, it indicates the operation is successful.

Go to the bin directory and find app. bundle. js. The code below is found.

function(module, exports) {  "use strict";  var a = 111; var b = 222; var xxx = function xxx(c, d) {  return c * d; }; console.log(xxx(a, b)); 

Proves transcoding successful ~~~~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.