1、npm i @babel/core、@babel/preset-env、@babel/runtime、@babel/plugin-transform-runtime、@babel/plugin-proposal-class-properties、@babel/preset-react -D

2、然后在.babelrc文件中添加{"presets":["@babel/preset-env","@babel/preset-react"], "plugins":["@babel/transform-runtime","@babel/plugin-proposal-class-properties"]}

3、在webpackconfig.js文件中添加

module: {
        rules: [
            {
              test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env']
                }
              }
            }
          ]
    }
4、npm run dev 大功告成啦

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

  1. webpack基础以及webpack中babel的配置

    webpack 安装 npm 初始化,控制台输入 npm init -y webpack 安装 npm i webpack webpack-cli -D 新建 webpack.config.js co ...

  2. webpack3.0之loader配置及编写(一)

    loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.loader 可以将文件从不同的语言(如 TypeScript)转换为 ...

  3. 脱离脚手架来配置、学习 webpack4.x (二)基础搭建loader 配置 css、scss

    序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提前等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...

  4. webpack4.x 从零开始配置vue 项目(二)基础搭建loader 配置 css、scss

    序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...

  5. babel,webpack-dev-server配置

    github仓库:https://github.com/llcMite/webpack.git 1.什么是webpack? webpack可以看做是模块打包机:它做的事情是,将静态资源当成模块打包成一 ...

  6. webpack4 自学笔记一(babel的配置)

    所有代码都可以再我的github上查看,每个文件夹下都会有README.md,欢迎star: https://github.com/Jasonwang911/webpackStudyInit/tree ...

  7. 17 webpack中babel的配置

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

  8. babel基础配置

    babel是干什么的 es6语法已经出来很多年,但各家游览器对es6的支持各不相同.为了解决这个问题,babel应运而生. babel支持把es6语法编译成es5,完全兼容各家游览器,避免兼容性问题出 ...

  9. Babel 6 配置

    Babel 6 较之前版本有些变化,几个比较重要的点. npm package babel 已经不在使用了,分成了下列几个 package babel-cli, 适用于命令行 babel-core, ...

  10. [webpack]——loader配置

    前言 当我们需要配置 loader 时,都是在 module.rules 中添加新的配置项,在该字段中,每一项被视为一条匹配使用 loader 的规则. 看一下基础实例: module.exports ...

随机推荐

  1. ajax学习相关

    choices参数 当存在某个字段的值只有有限的几个时,如性别(只有男.女),婚否(已婚.未婚)等,这种情况,我们可以用数字来代替这些中文字符,可以减轻数据库的负担,这时,就需要用到choices参数 ...

  2. Android多模块混淆的问题

    Android在多模块或者组件化的时候,关于混淆的管理,一般常见的做法就是两条. 把所有的混淆规则规则都放在app模块下面,由app统一管理.这样就会有一个问题,就是到会导致混淆规则的冗余. 由mod ...

  3. 用RecyclerView做一个小清新的Gallery效果 - Ryan Lee的博客

    一.简介 RecyclerView现在已经是越来越强大,且不说已经被大家用到滚瓜烂熟的代替ListView的基础功能,现在RecyclerView还可以取代ViewPager实现Banner效果,当然 ...

  4. 用 Python 读写 Excel 表格

    Python 可以读写 Excel 表格吗? 当然可以. Python 下有很多类库可以做到, openpyxl 就是其中的佼佼者. openpyxl 的设计非常漂亮 ,你一定会喜欢它!不信请往下看: ...

  5. Solr查询配置及优化【eDisMax查询解析器】

    一.简介 Lucene查询解析器语法支持创建任意复杂的布尔查询,但还有一些缺点,它不是用户查询处理的理想解决方案.这里面最大的问题是Lucene查询解析器的语法要求严格,一旦破坏就会抛出异常.指望用户 ...

  6. android通过NFC开启/关闭NTAG213的密码保护功能

    穷遍全网没有资料,最后找到了官方的寄存器文档和StackOverflow上找到了解决方案 首先要用 MifareUltralight 来进行操作,在onNewIntent处先校验返回的tag是否包含了 ...

  7. pc端适配移动端

    pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...

  8. grid实战之微信钱包 腾讯服务界面

    网格布局简介 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内.而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网格中. 有一些浏览器是不支持网格布局 ...

  9. js对象中关于this关键字的作用

    前两天在前端群看到群友问的一个问题,问题如下: var Name = 'window'; var obj = { Name:'obj字符串', getName:function(){ console. ...

  10. Mac笔记本使用小道解答集

    如何设置Mac默认应用程序 https://www.jianshu.com/p/0f912e6c846c 苹果本安装微软雅黑 下载微软雅黑字体Mac版 解压.ttf 拖拽放入 我的电脑/资源库/fon ...