What is the Babel

  1. The installationnpm install -D babel-loader @babel/core @babel/preset-env
  2. Use to convert high syntax to low syntax (ES6 to ES5)
  3. use

@ babel / plugin-transform-runtime

  1. The installationnpm install --save-dev @babel/plugin-transform-runtime
  2. The transform-Runtime transformer plug-in does three or two things:
  • @ Babel/runtime/regenerator when you use the generator/asynchronous function (available through the regenerator option switch) automatically when needed.
  • Core-js can be used as a helper if necessary, rather than assuming that the user will populate it (toggled with this corejs option)
  • Automatically remove the embedded Babel helper and change the @ Babel/Runtime /helpers helpers option to use the module.
  • What does this actually mean? Basically, you can use built-in plug-ins such as Promise, Set, Symbol, etc., as well as use all the tools needed to fill the seamless connection without global pollution, making it very suitable for libraries. Be sure to include @babel/ Runtime as a dependency.
  1. use
let path = require('path'); let HtmlWebpackPlugin = require("html-webpack-plugin") const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); Module. exports = {mode: 'development', // defaults to two types of production, development entry: './ SRC /index.js', // entry devServer:{port:3000, progress:true, // progress bar contentBase:"./dist" // start service directory}, output: {filename: 'bundle.[hash:8].js', // The package name hash has only eight bits path: Path.resolve (__dirname, 'dist'),}, plugins: new HtmlWebpackPlugin({template:'./ SRC /index.html', // Template file filename:"index.html", // parse the name hash:true, // generate the file with hash}), New MiniCssExtractPlugin({filename:'main.css' // package name}), new ESLintPlugin()], Module: {/ / module rules: [{$/ test: / \. CSS, use: [MiniCssExtractPlugin loader, 'CSS - loader]}. // Loader-style: insert CSS into the head tag {test:/\.js$/, exclude:/node_modules/, // Exclude use:{loader:'babel-loader', options:{// Need to set ES6 to ES5 presets:['@babel/preset-env'], "plugins": [// simple class decorators ["@babel/plugin-proposal-decorators", {"legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : True}], ["@babel/plugin-transform-runtime"]},}}]};Copy the code