webpack 5 配置babel-loader babel7

1.安装Balel目的：

在webpack中 默认只能处理部分 ES6的新语法，一些更高级的ES6或ES7的语法，webpack是处理不了的这个时候就需要借助第三方的loader 来帮助webpack 处理这些高级的语法。

Balel 可以帮我我们将高级的语法转为低级的语法。

2.安装命令

npm install babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime -D

3.webpack.config.js配置模块规则

module.exports = {
 module: {        
        rules: [　　　　　　
　　　　　　　　{
                test: /\.js$/, exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env'
                            ],
                            plugins: [
                                [require("@babel/plugin-transform-runtime"), { "legacy": true }],
                                [require("@babel/plugin-proposal-class-properties"), { "legacy": true }]
                            ]
                        }
                    }
                ]              
            }
        ]  
    }
}            

　　

4.webpack 重新编译下 npm run build