webpack中babel常用配置

如果要使用ES2020，需要babel@7.8以上（可选链运算符真香）

npm install --save-dev @babel/core @babel/cli @babel/preset-env

react中需要引入

presets: [
    '@babel/preset-react',
    '@babel/preset-env'
]

转化箭头函数

@babel/transform-arrow-functions

转化const和let

@babel/plugin-transform-block-scoping

使用装饰器

@babel/plugin-proposal-decorators 
@babel/plugin-proposal-class-properties

动态引入模块

@babel/plugin-syntax-dynamic-import

最后处理js和jsx代码

{
    test: /.js(x)?/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                presets: [
                    '@babel/preset-react',
                    '@babel/preset-env'
                ]
                plugins: [
                    ["@babel/plugin-proposal-decorators", { "legacy": true }], // 注意必须写在@babel/plugin-proposal-class-properties前面
                    '@babel/plugin-proposal-class-properties',
                    '@babel/transform-arrow-functions',
                    '@babel/plugin-transform-block-scoping',
                    '@babel/plugin-syntax-dynamic-import',
                ]
            }
        }
    ]
}