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