需要安装的插件:

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. 017_Python3 数据结构

    本章节我们主要结合前面所学的知识点来介绍Python数据结构.   *****************************   1.列表 Python中列表是可变的,这是它区别于字符串和元组的最重 ...

  2. 表述数据的手段——json

    一.JSON 语法规则 在 JS 语言中,一切都是对象.因此,任何支持的类型都可以通过 JSON 来表示,例如字符串.数字.对象.数组等.但是对象和数组是比较特殊且常用的两种类型: 对象表示为键值对 ...

  3. printf的使用

    #!/bin/bashprintf "|------------------------------------\n"printf "this is printf str ...

  4. kindle touch 5.1.2 update your kindle 灰色 解决办法

    要出差了,于是把抽屉里的老Kindle Touch拿出来想升个级,baidu说多看费电,果断卸了用原生. 但是原生里面升级选项“update your kindle”是灰色的,没法点,怎么办? 试了半 ...

  5. 常用命令备忘 lsof

    lsof命令 可以列出被进程所打开的文件的信息.被打开的文件可以是 1.普通的文件, 2.目录 3.网络文件系统的文件, 4.字符设备文件 5.(函数)共享库 6.管道,命名管道 7.符号链接 8.底 ...

  6. UOJ#339. 【清华集训2017】小 Y 和二叉树 贪心

    原文链接 www.cnblogs.com/zhouzhendong/p/UOJ339.html 前言 好久没更博客了,前来更一发. 题解 首先,我们考虑一个子问题:给定根,求出最小中序遍历. 如果根节 ...

  7. andriod studio命名规范

    标识符命名法标识符命名法最要有四种: 1 驼峰(Camel)命名法:又称小驼峰命名法,除首单词外,其余所有单词的第一个字母大写. 2 帕斯卡(pascal)命名法:又称大驼峰命名法,所有单词的第一个字 ...

  8. javascript中对一个对象数组按照对象某个属性进行排序

    需求:对timelist排序 安装keys . 分析:timelist 是个数组对象,里面包含属性 keys,val.这里借助数组sort方法 传入function <script> // ...

  9. 三大框架 之 Hibernate框架概述(概述、配置、核心API)

    目录 Hibernate框架概述 什么是框架 hibernate简介(JavaEE技术三层架构所用到的技术) hibernate是什么框架 ORM hibernate好处 Hibernate基本使用 ...

  10. ch341a编程器写操作超时失败

    当点击自动编写‘提示写操作超时失败’要怎么样才能解决,下面我给大家分享一下!   方法/步骤     首先我们点击操作   选择操作选项   看看箭头所指的几个地方是不是都没打上勾   我们把这几个地 ...