今天在学习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. HBase 物理视图

  2. md5密码入库

    <?php //连接数据库 $pdo = new PDO('mysql:host=localhost;dbname=md5;charset=UTF8', 'root', ''); # 设置为fa ...

  3. 如何用js造轮子

    写了一个非常通俗易懂的造轮子的方法 <div class="wrap"></div> <div class="wrap">& ...

  4. PHP的垃圾回收机制（开启垃圾回收机制后的优缺点是什么）

    PHP的垃圾回收机制(开启垃圾回收机制后的优缺点是什么) 一.总结 一句话总结: 拿时间换空间:针对内存泄露的情况,可以节省大量的内存空间,但是由于垃圾回收算法运行耗费时间,开启垃圾回收算法会增加脚本 ...

  5. php7开启强类型模式

    版权声明: https://blog.csdn.net/shi_yi_fei/article/details/52006809 我们知道php是一种弱类型的编程语言,但是php7已经有所改变,可以支持 ...

  6. 装配SpringBean(二)--XML方式介绍

    装配SpringBean,我理解的意思就在容器中定义一个bean,然后让容器通过某种方式找到它.因为在Spring中一切皆资源,资源就是所谓的bean,我们怎么才能从容器中获取这些资源呢?那就是控制反 ...

  7. hashMap 源码解读理解实现原理和hash冲突

    hashMap 怎么说呢. 我的理解是 外表是一个set 数组,无序不重复 . 每个set元素是一个bean ,存着一对key value 看看代码吧 package test; import jav ...

  8. Python基础-列表、元组、字典、字符串（精简解析），全网最齐全。

    一.列表 =====================================================1.列表的定义及格式: 列表是个有序的,可修改的,元素用逗号隔开,用中括号包围的序列 ...

  9. matlab实现一次性实现多个文件夹图片转化为.mat文件

    %这里是主函数:命名为readImg.m; clc;clear; %---read_image; filepath = 'G:\人脸重建\data\src_all\';%图片路径可以根据自己需要修改; ...

  10. Javascript-new Date() 与 Date() 的区别

    var today1 = Date() //返回一个字符串(string),没有getDate等日期对象方法,内容为当前时间 var today2 = new Date() //返回一日期对象,内容为 ...