关于 webpack 通过 npm 配置 Babel 的异常问题的解决方式 npm install babel-loader@8

最新推荐文章于 2023-05-23 17:59:38 发布

Mankeung Suen

最新推荐文章于 2023-05-23 17:59:38 发布

阅读量1.5k

点赞数

文章标签： webpack babel Babel配置 Babel报错 npm install babel-loader

本文链接：https://blog.csdn.net/weixin_44732337/article/details/102906674

版权

本文介绍了作者在配置webpack时遇到的Babel异常问题及其解决方案。通过npm安装babel-loader@8及相关的@babel依赖，并创建.babelrc文件进行配置，成功解决了问题。同时提到了不同版本可能导致的配置失效，并分享了个人package.json内容作为参考。

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

我这个菜鸟也遇到了，刚学，webpack 太t/m坑了，要安装和配置跟天书一样。
以下是我对 Babel 通过 npm 配置在 webpack 的经历。已经解决了出错的问题，希望能够给大家参考。
1，配置的过程中，我认为版本号不同会导致配置失败，也就是可能以后版本更新了，本方式也失效。我是看别人的视频跟着操作也出错，🐎的。
2，虽然看不太懂这些出错的意思（可以Google），不过不断地给本地项目 npm install 那些 babel 插件准没错的心态击败它的。
post 代码如下：

npm install babel-loader@8 @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

以上坑/爹代码可以看出，要正确配置Babel，需要安装很多东西。
看出，新版本 8.x 使用了 @babel/ 的前缀，而不是 babel- 为前缀
其中，结合其他人的经验，最重要的是
== babel-loader@8 @babel/core @babel/preset-env 和 @babel/plugin-proposal-class-properties ==
在 webpack.config.js 配置不变，
{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }