今天在学习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. rabbitmq类

    1.accept.php消费者代码需要在命令行执行 2.'username'=>'asdf','password'=>'123456' 改成自己的帐号和密码 RabbitMQCommand ...

  2. nextjs服务端渲染原理

    1. 简单的介绍一下 nextjs是react进行服务端渲染的一个工具,默认以根目录下的pages为渲染路由 比如我在pages目录下创建一个index.js文件,然后export default一个 ...

  3. 移动端自动化测试Appium 从入门到项目实战Python版

    移动端自动化测试Appium 从入门到项目实战Python版  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课 ...

  4. 通过pyppeteer来爬取今日头条

    import asyncio from pyppeteer import launch async def main(): browser = await launch() page = await ...

  5. VS2005连接MySQL C API

    1.在属性添加:附加目录,附加依赖库,附加库目录: 2.在stdafx.h中加入: #include <winsock.h> #include "mysql.h" 3. ...

  6. Leetcode461Hamming Distance汉明距离

    两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意: 0 ≤ x, y < 231. 示例: 输入: x = 1, y ...

  7. PYTHON__ ITERTOOLS模块

    组成 总体,整体了解 无限迭代器 迭代器 参数 结果 例子 count() start, [step] start, start+step, start+2*step, ... count(10) - ...

  8. php连接数据库查询方法（还少一种pdo方法）

    <?php header("content-type:text/html;charset=utf-8"); $conn = mysql_connect("local ...

  9. jnhs-netbeans maven Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.4.1:clean (default-clean) on project

    w 无法完成清理 出现这种错误,通常是由于启动了另一个tomcat 进程或者运行的javaw.exe进程,导致报错. 直接运行工程启动后再清理就好了 或者 重启大法

  10. 大半夜吃饱了撑的帮人调IE玩

      那高手的也是IE6,我也是IE6,但是他的IE6就总是进recv,我的IE6就进WSARecv,一点都不科学...擦..不调了.