今天在学习webpack的使用的时候，由于学习的教程是2018年初的，使用的是 webpack 3.x 和 babel 6.x ，然后学习的过程中出现的了很多问题。

解决问题之后，总结一下新的 babel 7.x 结合 webpack 4.x 配置 的正确方法

参考了官方文档：https://www.babeljs.cn/docs/setup/#installation

参考资料 升级指南 Upgrade to Babel 7

安装包

写 .babelrc 配置文件

配置 webpack 文件

总结：

babel舍弃了以前的 babel-- 的命名方式，改成了@babel/-

stage-× 已经被弃用，要把babel-preset-stage-0 卸载，然后修改.babelrc文件

babel 7.x 结合 webpack 4.x 配置的更多相关文章

  1. babel 7.x 和 webpack 4.x 配置vue项目

    很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互.按照之前运行非常流畅的配置走一遍,打包遇到各种坑.只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了. ...

  2. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  3. webpack + vuejs 基本配置（一）

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  4. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  5. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  6. [转] webpack热更新配置小结

    webpack热更新配置 热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果.而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间. 热更新一般会涉及到两种场 ...

  7. webpack快速入门——配置JS压缩，打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  8. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

  9. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

随机推荐

  1. Ubuntu18上安装Go和GoLand

    第一步骤:安装Go 方式一: 使用 sudo apt-get install golang命令安装 ubuntu软件库里当前golang版本为1.10,(golang最新版为1.11),可满足要求. ...

  2. mysql设置密码登录

    参考: https://blog.csdn.net/Light_Breeze/article/details/82070222 https://www.jianshu.com/p/d979df2791 ...

  3. python内置类型详细解释

    文章编写借鉴于内置类型 - Python 3.7.3 文档,主要用于自己学习和记录 python主要内置类型包括数字.序列.映射.类.实例和异常 有些多项集类是可变的.它们用于添加.移除或重排其成员的 ...

  4. 初识莫队——小Z的袜子

    以前一直觉得莫队是多么高大上的一种算法,然而仔细看了下发现其实并不复杂,实质上就是技巧性的暴力美学. 在我看来莫队是一种分块排序后降低复杂度的算法,当答案可以通过左右端点一个一个移动维护出来的时候就可 ...

  5. 微信小程序——简易动画案例

    wxml: <view class="container"> <view animation="{{animation}}" class=&q ...

  6. 深入浅出 Java Concurrency (1) : J.U.C的整体认识[转]

    去年年底有一个Guice的研究计划,可惜由于工作“繁忙”加上实际工作中没有用上导致“无疾而终”,最终只是完成了Guice的初步学习教程,深入的研究没有继续进行下去. 最近一直用的比较多的就是java. ...

  7. 通过原生JS打印一个空心菱形图案

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. /etc/inittab配置文件详解

    init的进程号是1,从这一点就能看出,init进程是系统所有进程的起点,Linux在完成核内引导以后,就开始运行init程序,init程序需要读取设置文件/etc/inittab.inittab是个 ...

  9. GitBook的使用方法

    ---恢复内容开始--- 由于近期工作中使用gitbook编写讲义,现把出现的问题总结下: 1 . gitbook的安装 Gitbook与word等办公软件类似,能够编写文档,Gitbook中编写文档 ...

  10. web前端学习（四）JavaScript学习笔记部分（9）-- JavaScript面向对象详解

    1.认识面向对象 1.1.概念 1.一切事物皆是对象 2.对象具有封装和继承特性 3.信息隐藏(类的信息隐藏,包括属性和方法) <!DOCTYPE html> <html lang= ...