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

巴特西

webpack 5 配置babel-loader babel7

最新文章

热门文章