今天在学习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. jqGrid的subGrid子表格

    使用完整jqGrid作为子表格 使用子表格,涉及到jqGrid的三个选项: subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false:当此项设为true的时候,Gr ...

  2. 论文翻译——R-CNN（目标检测开山之作）

    R-CNN论文翻译 <Rich feature hierarchies for accurate object detection and semantic segmentation> 用 ...

  3. [Bzoj3696]化合物【暴力+树形Dp】

    Online Judge:Bzoj3696 Label:暴力,树形Dp 题目描述 首长NOI惨跪,于是去念文化课了.现在,他面对一道化学题. 这题的来源是因为在一个奇怪的学校两个化竞党在玩一个奇怪的博 ...

  4. Windows API 第20篇 SetVolumeMountPoint 设置卷挂载点参数错误

    函数原型:BOOL SetVolumeMountPoint(                                                   IN   LPCTSTR lpszVo ...

  5. Nginx简介与基础配置

    何为Nginx? Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.最初是为了解决C10k的问题,由Igor ...

  6. mysql兼容性语句

    SHOW /*!50 GLOBAL */ STATUS SHOW /*!500 GLOBAL */ STATUS SHOW /*!5000 GLOBAL */ STATUS 都报错,必须是 SHOW ...

  7. day48作业

    使用Bootstrap框架编写一个简单的web静态页面 效果图: <!DOCTYPE html> <html lang="en"> <head> ...

  8. jeecms v9导入myeclipse 2015 ehcache.xml报错问题

    1.找不到ehcache.xml文件问题 cache-context.xml <property name="configLocation"> <value> ...

  9. 装配SpringBean(六)--配置文件加载方式

    spring中的配置文件有两种: 以XML结尾的spring配置文件 以properties结尾的属性配置文件 在spring中有两种方式加载这两种文件: 通过注解+java配置的方式 通过XML的方 ...

  10. PAT甲级——A1019 General Palindromic Number

    A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...