需要安装的插件:

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 文件解压缩

    转载 https://blog.csdn.net/qq_27803491/article/details/52785838 01-.tar格式 解包:[*******]$ tar xvf FileNa ...

  2. php使用WebUploader做大文件的分块和断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  3. easyui增删改查

    easyui的crud(dialog,datagrid.form讲解)1.datagrid布局2.dialog布局3.form布局4.通用的JsonBaseDao增删改方法5.dao层6.web层7. ...

  4. tar归档压缩命令和zip归档 和7zip压缩命令;库文件归档ar命令

    第一.tar 归档 tar -c 创建归档文件包 tar -x 释放归档文件包 tar -t 查看归档文件包 tar -v 显示归档包操作过程信息 tar -f 指定归档文件名 案例1:归档 /hom ...

  5. C语言函数的定义和使用(2)

    一:无参函数 类型说明符 get(){ //函数体 } 二:无参函数 类型说明符 getname(int a,int b){ //函数体 } 三:类型说明符包括: int ,char,float,do ...

  6. idea maven No implementation for org.apache.maven.model.path.PathTranslator was bound.

    查看idea log 2019-11-08 22:30:29,402 [ 475319] ERROR - #org.jetbrains.idea.maven - IntelliJ IDEA 2018. ...

  7. 微信小程序 长按文字复制与按钮复制

    1. 长按文字复制 当要实现长按文字进行复制的时候,需要使用text标签,并将selectable属性设置为true <text class='url-txt' selectable='true ...

  8. [代码审计]四个实例递进php反序列化漏洞理解【转载】

    原作者:大方子 原文链接:https://blog.csdn.net/nzjdsds/article/details/82703639 0x01 索引 最近在总结php序列化相关的知识,看了好多前辈师 ...

  9. springboot websocket 简单入门

    在没有WebSocket时,大多时候我们在处理服务端主动给浏览器推送消息都是非常麻烦,且有很多弊端,如: 1.Ajax轮循 优点:客户端很容易实现良好的错误处理系统和超时管理,实现成本与Ajax轮询的 ...

  10. Django框架,python2和python3共存的情况下,创建Django项目

    一.python2和python3共存的情况下,直接使用 django-admin startproject Django-project 这个时候系统默认使用的是python2创建,可能由于pyth ...