Webpack中配置Babel

走到此时很多小伙伴可能会发现问题，我们现在写的ES6代码，为啥能正常运行呢？

那是因为我们目前用的是 Chrome 浏览器，默认就支持，但是如果一些浏览器无法支持怎么办?

我需要使用 babel 进行编译

安装

xxxxxxxxxx
npm install --save-dev @babel/core@7.18.5
npm install --save-dev @babel/preset-env@7.18.2
npm install --save-dev babel-loader@8.2.5

增加配置文件"babel.config.js"

在项目根目录下增加 babel.config.js 的配置文件

xxxxxxxxxx
// babel.config.js
module.exports = {
    presets: ['@babel/preset-env']
}

修改配置文件

xxxxxxxxxx
module: {
        rules: [
            {
                test:/\.js$/,
                use:['babel-loader']
            },
        ]
}

温馨提示

通过观察打包之后的文件，在添加babel之前和之后的区别

实时效果反馈

1. 在webpack中，解析ES6语法的配置文件名称是什么：

A webpack.config.js

B javascript.js

C babel.config.js

D babel.js

答案

1=>C