webpack中配置babel

为什么要配置babel？

因为在webpack中，默认只能处理一部分es6的语法，一些更高级的es6和es7语法webpack不能处理，这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法

配置步骤

1、先通过两套命令来安装loader：

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

2、在webpack.config.js配置文件中的modules节点中添加一个规则

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

3、在根目录下创建.babelrc配置文件

作用：用来打包编译node_modules中所有第三方js文件，否则会非常消耗cpu，打包速度慢，项目会无法运行　

{
    “presets”:["env","satge-0"],
    "plugins":["transform-runtime"]
}

4、在main.js中写一段高级语法来进行测试

class Preson{
    static info = {name:'sy',age:22}
}
console.log(Preson.name)

5、输入命令npm run dev 运行

结果非常不幸，出现了错误，哭哭哭，后来在网上找到了解决方法，原来是babel-core不对

遇到的问题

应该将babel-core的版本改为7.5.1版本

npm i babel-core@7.5.1 -D

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6751