需要安装的插件:

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. linux系列目录

    一:linux系列部分  linux系列(一):ls命令 linux系列(二):cd命令 linux系列(三):pwd命令 linux系列(四):mkdir命令 linux系列(五):rm命令 lin ...

  2. TCP的几个知识点

    1. 三次握手.四次挥手 详细查看:https://www.cnblogs.com/amiezhang/p/6703390.html 2. ARQ 协议 ARQ 就是超时重传机制,分为 2 种:停止等 ...

  3. Pytest权威教程-更改标准(Python)测试发现

    目录 更改标准(Python)测试发现 在测试收集过程中忽略路径 测试期间收集的测试取消 保留从命令行指定的重复路径 更改目录递归 更改命名约定 将cmdline参数解释为Python包 找出收集的东 ...

  4. 两个int类型的数据相加,有可能会出现超出int的表示范围。

    两个int类型的数据相加,有可能会出现超出int的表示范围. /* 移位运算符: <<(左移) 规律:一个操作数进行左移运算的时候,结果就是等于操作数乘以2的n次方,n就是左移 的位数. ...

  5. 03、CPU主频,和性能

    性能?时间的倒数 有两个指标:一个是响应时间或者叫执行时间:一个是吞吐率或者带宽,这两个就可以理解为办事的时间和办事的多少. 而 性能= 1/响应时间 CPU时钟:计算机的计时单位 程序的CPU执行时 ...

  6. VS2008下LibTomCrypt 1.17的编译和使用《转》

    文章出处:http://blog.csdn.net/delphiwcdj/article/details/6298820 具体步骤如下: (1) 下载tomcrypt tomcrypt 1.17 VS ...

  7. receipt

    receipt - 必应词典 美[riˈsiːt]英[rɪ'siːt] n.收据:收入:接受:字据 v.开收据 网络收到:收条:发票 变形复数:receipts: 搭配give receipt:sig ...

  8. android x86 安装

    1.下载页面 http://www.android-x86.org 下载了: android-x86-8.1-r2.iso 用Win32DiskImager制作usb启动盘. 参考: https:// ...

  9. elementUI 列表里面含有多选框,当翻页的时候依然保持之前页多选不变

    el-table的type="selection"的使用 场景:el-table,type="selection"时,重新请求后,设置列表更新前的已勾选项 踩坑 ...

  10. vs2017发布后宕机,没有响应解决方法

    找到项目下:Properties\PublishProfiles 删除:FolderProfile.pubxml.user