webpack 配置es6转es5

1、安装

yarn add @babel/core @babel/polyfill @babel/preset-env babel-loader

2、项目根目录webpack.config.js中配置rules

{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
}

3、在项目根目录下新建.babelrc,里面代码如下

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage"    //这个的含义是引入的@babel/polyfill按需加载，只使用项目中需要转为es5的部分，减少项目大小
            }
        ]
    ]
}

4、在main.js中引入@babel/polyfill

import '@babel/polyfill'

5、成功，如果是编写插件，不影响全局代码，就应该使用@babel/plugin-transform-runtime,.babelrc配置如下

{
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 2,   //一般使用2
                "helpers": true,
                "regenerator": true,
                "useESModules": false,
                "version": "7.0.0-beta.0"
            }
        ]
    ]
}