webpack 配置 babel

最新推荐文章于 2024-08-09 17:34:21 发布

yleavesw

最新推荐文章于 2024-08-09 17:34:21 发布

阅读量647

点赞数

分类专栏：开发文章标签： babel webpack

本文链接：https://blog.csdn.net/qq_38701868/article/details/112635895

版权

本文介绍了如何为Webpack 4.2及以上版本配置Babel，以处理ES6+的代码。首先，需要安装`@babel/core`作为Babel的核心编译包，接着安装`babel-loader`来加载并处理JS文件。在Webpack配置中，通过`exclude`和`include`指定不处理和需要处理的目录。为了设定解析标准，需要安装`@babel/preset-env`，它可以处理所有新ES规范的代码。此外，可能需要在`.babelrc`文件中配置Babel，并根据项目需求添加`@babel/plugin-transform-runtime`解决类中箭头函数的错误。最后，更新Webpack配置文件完成Babel的集成。

摘要由CSDN通过智能技术生成

文章目录

根据 webpack 版本的不同，安装的 babel 依赖有些区别，下面的是 webpakc 4.2 及以上版本安装的依赖。 4.2 之前的是：babel-core、babel-preset-env

要配置 babel 首先需要安装 @babel/core，这是 babel 的核心编译包：

cnpm install --save-dev @babel.core

然后需要安装 babel-loader 来帮助我们加载使用 babel：

cnpm i --save-dev babel-loader

这时候，在 webpack.config.js 中 rules 的代码是这样的：

module:{
   
    rules: [
        {
   
            test: /\.js$/,
            use: {
   
                loader: 'babel-loader'
            },
            exclude:path.resolve