需要安装的插件:

cnpm i -D babel-core babel-loader babel-plugin-syntax-jsx babel-plugin-transform-runtime  babel-plugin-transform-vue-jsx babel-preset-env babel-preset-stage-2

直接安装的babel-loader是8.0的需要降到7.0,babel-core6.0需要babel-laoder7.0进行匹配;
.babelrc配置文件:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]

webpack的配置文件中module-rules中加入:

{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader'
}

webpack配置babel-loader的更多相关文章

  1. webpack配置常用loader加载器

    webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...

  2. webpack配置babel篇

    babel-polyfill & babel-runtime & babel-preset-env babel-core babel-core 的作用是把 js 代码分析成 ast , ...

  3. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  4. Webpack的详细配置,[Webpack中各种loader的安装配置]

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

  5. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  6. 17 webpack中babel的配置

    在webpack中,默认只能处理一部分ES6的新语法,一些更高级的ES6语法或者ES7语法, webpack是处理不了的:这时候,就需要借助于第三方的loader,来帮助webpack处理这些高级的语 ...

  7. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  8. Webpack配置示例和详细说明

    /* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...

  9. vue-cli#2.0 webpack 配置分析

    目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...

  10. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

随机推荐

  1. 2.1 什么是C++

    C++是一种通用程序设计语言,特别是面向系统程序设计. 1:是一个更好的C 2:支持数据抽象 3:支持面向对象的程序设计 4:支持通用型程序设计

  2. HDP 企业级大数据平台

    一 前言 阅读本文前需要掌握的知识: Linux基本原理和命令 Hadoop生态系统(包括HDFS,Spark的原理和安装命令) 由于Hadoop生态系统组件众多,导致大数据平台多节点的部署,监控极其 ...

  3. win32线程栈溢出问题 (二)

    3.2.函数递归调用引发的栈溢出 写一段最简单的无穷递归代码,如下: #include "stdafx.h" void f(void) { f(); } int _tmain(in ...

  4. Windows异常处理机制简介

    windows系统里,为了保证系统内核的强壮和稳定,为了保证用户程序的强壮和稳定,提供了异常处理机制,来帮助程序员和系统使用人员处理异常.简单来说,当CPU执行代码时,发生异常,会把异常告知操作系统, ...

  5. C++语言第一课的学习

    // HelloApp.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include ...

  6. P5590 【赛车游戏】

    果然我还是太\(Naive\)了 首先有一些点/边其实是没有意义的,如果从1出发不能到该点或者从该点不能到n,这个点就可以不用管了.这个过程可以用正反两边\(dfs/bfs\)实现 然后删掉那些点之后 ...

  7. python2 && python3 的 input函数

    Python2.x中的input()函数input()函数让我们明确我们输入的是数字格式还是字符格式,就是我们自己要知道我们想要的是什么,数字格式直接输入,字符格式必须加上单引号或者双引号,以确定我们 ...

  8. 常用spaceclaim脚本(三)

    拉伸曲线 ptList=List[Point]() #定义一个点的列表 ptList.Add(Point.Create(MM(11),MM(-14),MM(0))) #创建点,并放入列表当中 ptLi ...

  9. OpenFOAM在原有算例上新建算例(只拷贝0,system,constant)

    原视频下载地址: https://yunpan.cn/cMpyBHSEvC7T4  (提取码:dca4)

  10. html5的 embed元素 和 object元素

    html5的 embed元素 和 object元素 一.总结 一句话总结: embed定义嵌入的内容,比如插件,比如flash object定义定义一个嵌入的对象,用于包含对象,比如图像.音频.视频. ...