Webpack with Babel

I. INTRODUCTION of Babel

①babel is a JavaScript compiler that can turn ES6 syntax into a browser-compatible ES5 syntax

②babel Chinese official website: https://www.babeljs.cn/

③babel can be used alone, but is generally used in conjunction with Webpack

second, the use of Babel in Webpack

1, Babel-loader Babel-core babel-preset-env (conversion syntax)

① Installation dependencies:

// has been installed in the project Webpack case --save-dev babel-loader babel-core babel-preset-env

② Configuration

//the file is actually going to be executed in the node environment.Const PATH = require (' path ') Const Htmlwebpackplugin= Require (' Html-webpack-plugin ')//to export an object with a special property configurationModule.exports ={entry:'./src/main.js ',/*Portal File Module path*/output:{path:path.join (__dirname,'./dist/'),/*Export File module belongs to the directory, must be an absolute path*/FileName:' Bundle.js '/*packaged result file name*/}, devserver:{//Configuring the WWW directory for webpack-dev-serverContentbase: './dist '}, plugins:[//The plugin can pack the index.html into the directory where the Bundle.js file belongs, followed by the bundle.        //The script reference link is also automatically injected into the index.html, and the referenced resource name is also dependent on the packaged file name        Newhtmlwebpackplugin ({Template:'./index.html '})], module:{rules:[{test:/.css$/, use:[//Note: The order here is important, don't mess up the order' Style-loader ',                    ' Css-loader ']}, {test:/. (jpg|png|gif|svg) $/, use:[' File-loader ']}, {test: /\.js$/, exclude:/(node_modules|bower_components)/,//Exclude Node_module Directoryuse:{Loader: ' Babel-loader ', options:{     presets:[' env '] //transcoding rules                    }                } }        ]    }}           

③ Packaging

Run Build

2. Babel-polyfill to provide unsupported APIs in low-version browsers

① Installation Dependencies

--save-dev Babel-polyfill

② configuration: This will provide a stepping pad for compatibility with an unsupported API in a low-version browser (a method compatible with a low-version browser) when packaging

//the file is actually going to be executed in the node environment.Const PATH = require (' path ') Const Htmlwebpackplugin= Require (' Html-webpack-plugin ')//to export an object with a special property configurationModule.exports ={entry:[' Babel-polyfill ','./src/main.js '],/*Portal File Module path*/output:{path:path.join (__dirname,'./dist/'),/*Export File module belongs to the directory, must be an absolute path*/FileName:' Bundle.js '/*packaged result file name*/}, devserver:{//Configuring the WWW directory for webpack-dev-serverContentbase: './dist '}, plugins:[//The plugin can pack the index.html into the directory where the Bundle.js file belongs, followed by the bundle.        //The script reference link is also automatically injected into the index.html, and the referenced resource name is also dependent on the packaged file name        Newhtmlwebpackplugin ({Template:'./index.html '})], module:{rules:[{test:/.css$/, use:[//Note: The order here is important, don't mess up the order' Style-loader ',                    ' Css-loader ']}, {test:/. (jpg|png|gif|svg) $/, use:[' File-loader ']}, {test:/\.js$/, exclude:/(node_modules|bower_components)/,//Exclude Node_module Directoryuse:{Loader:' Babel-loader ', options:{presets:[' Env ']//transcoding rules                    }                }            }        ]    }}

③ Packaging

Run Build

3, Transform-runtime solve the code duplication problem

① in the packaging process, Babel will provide some tool functions in the package, and these tool functions may appear repeatedly in multiple modules.

② This causes the packaging to be too bulky, so Babel provides the babel-transform-runtime to solve the problem of too large a volume

③ Installation Dependencies

babel-plugin-transform-runtime--save-  DevBabel  -runtime--save

④ Configuration

//the file is actually going to be executed in the node environment.Const PATH = require (' path ') Const Htmlwebpackplugin= Require (' Html-webpack-plugin ')//to export an object with a special property configurationModule.exports ={entry:[' Babel-polyfill ', './src/main.js '],/*Portal File Module path*/output:{path:path.join (__dirname,'./dist/'),/*Export File module belongs to the directory, must be an absolute path*/FileName:' Bundle.js '/*packaged result file name*/}, devserver:{//Configuring the WWW directory for webpack-dev-serverContentbase: './dist '}, plugins:[//The plugin can pack the index.html into the directory where the Bundle.js file belongs, followed by the bundle.        //The script reference link is also automatically injected into the index.html, and the referenced resource name is also dependent on the packaged file name        Newhtmlwebpackplugin ({Template:'./index.html '})], module:{rules:[{test:/.css$/, use:[//Note: The order here is important, don't mess up the order' Style-loader ',                    ' Css-loader ']}, {test:/. (jpg|png|gif|svg) $/, use:[' File-loader ']}, {test:/\.js$/, exclude:/(node_modules|bower_components)/,//Exclude Node_module Directoryuse:{Loader:' Babel-loader ', options:{presets:[' Env '],//transcoding rules                        plugins:[' Transform-runtime ']                    }                }            }        ]    }}

Webpack with Babel