babel

什么是 babel

1. 安装 npm install -D babel-loader @babel/core @babel/preset-env
2. 作用 把高版本语法转化低版本 （es6 转 es5 ）
3. 使用

@ babel / plugin-transform-runtime

1. 安装 npm install --save-dev @babel/plugin-transform-runtime
2. 作用 该 transform-runtime 变压器插件做了三两件事：

• @babel/runtime/regenerator 当您使用生成器/异步功能（可通过该 regenerator 选项切换）时自动需要。
• 可以 core-js 在必要时用于帮助程序，而不是假设用户会对其进行填充（可通过该 corejs 选项切换）
• 自动删除内嵌的 Babel 帮助程序并@babel/runtime/helpers 改为使用模块（可通过该 helpers 选项切换）。
• 这实际上是什么意思？基本上，你可以使用内置的插件，如 Promise，Set，Symbol，等，以及使用所有需要填充工具无缝连接，无需全球污染通天特点，使其非常适合于图书馆。 确保将其包括@babel/runtime 为依赖项。

3. 使用

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', // 默认两种 production, development
  entry: './src/index.js', //入口
  devServer:{
    port:3000,
    progress:true, // 进度条
    contentBase:"./dist" //起服务的目录
  },
  output: {
    filename: 'bundle.[hash:8].js', //打包名字 hash 只有八位
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[ // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template:'./src/index.html', //模板文件
      filename:"index.html",  // 解析后的名字

      hash:true, //生成带哈希的文件
    }),
    new MiniCssExtractPlugin({
      filename:'main.css' // 打包之后的名字
    }),
    new ESLintPlugin()
  ],
  module:{ // 模块
    rules:[
      {
        test:/\.css$/,
        use:[MiniCssExtractPlugin.loader,'css-loader']
      },  //  loader 的顺序是从右往左  style-loader 把css 插入head标签中
      {
        test:/\.js$/,
        exclude:/node_modules/, //排除
        use:{
          loader:'babel-loader',
          options:{ // 需要把es6 转es5
            presets:['@babel/preset-env'],
                "plugins": [ //简单的类装饰器
                  ["@babel/plugin-proposal-decorators", { "legacy": true }],
                  ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                  ["@babel/plugin-transform-runtime"] //把多次调用的 方法 提取出来 精简代码
                ]
          },
        }
      }
    ]
  }
};