webpack4基本打包（二）----babel配置打包方法

本文链接：https://blog.youkuaiyun.com/qq_39125445/article/details/88241661

本文详细介绍如何配置Babel和Webpack进行代码转换和打包。包括安装babel-core、babel-cli及插件，设置.babelrc文件，使用babel命令预览转换效果，以及在Webpack中加载并打包JS文件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先想要配置babel打包，先在本地配置一下babel转换环境，后面再使用webpack加载要转换打包的文件。

配置环境有两种

第一种：插件自己安装类型

首先配置本地babel环境

1.安装babel-core

npm install babel-core

2.根目录创建.babelrc文件，这个文件的作用是在linux中rc文件是自动执行文件

3.安装babel-cli，安装这个脚手架的作用是可以使用babel命令

npm install babel-cli -g

4.你需要转换的插件类型，必须箭头函数等语法需要被转换。

npm install babel-plugin-transform-es2015-arrow-functions

5.在.babelrc文件中使用的是json格式

{
    "plugins':[
    "transform-es2015-arrow-functions"
]
}

6.就可以在控制台使用babel-cli中的babel命令尝试在本地转换文件，babel src/main.js，就可以在控台看到你转换效果。

7.使用webpack加载需要打包的文件，运用本地环境进行打包

先安装加载器，然后进行babel配置，exclude的意思是哪些js文件不加载。

{
            test:/\.js$/,
            use:[
                {
                    loader:"babel-loader"
                }
            ],
            exclude:/node_modules/
        }

8.使用打包命令成功

第二种情况：

使用babel-preset-env命令，自动下载各种插件，不用自己去下载插件

第一种1,2,3步一样

4.不安装插件，安装babel全局变量

npm intsall babel-perset-env

5.配置.babelrc文件

{
    "presets": [
       [
        "env",{
            "debug" : true
        }
       ]
    ]
}

6.配置了这个文件后，使用打包命令

7.如果想直接看效果，使用babel src/main.js命令