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. STM32 一个初始化EXTI的例子

    23 May 2017 » Hardware 注:STM32F407VGT6 with STM32F4 DSP and standard peripherals library v1.8.0 外部中断 ...

  2. vuejs 踩坑及经验总结

    问题描述 在使用 v-for repeat 组件时控制台会出现警告: 解决方法 在组件标签上使用 v-for : 加 :key 使用 template 标签包裹该组件,再在 template 标签 上 ...

  3. LeetCode~1033.移动石子直到连续

    1033.移动石子直到连续 三枚石子放置在数轴上,位置分别为 a,b,c. 每一回合,我们假设这三枚石子当前分别位于位置 x, y, z 且 x < y < z.从位置 x 或者是位置 z ...

  4. OO第四单元总结暨学期总结

    一.第四单元作业架构设计 我们第四单元围绕UML图展开,在第四单元开始之前,本来以为我们的工作是学习如何使用UML工具,开始后才意识到我们要做的是解析UML类图.顺序图和状态图.当然,让我们解析的只是 ...

  5. sql的练习题

    表名和字段 –1.学生表 Student(s_id,s_name,s_birth,s_sex) --学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_i ...

  6. [Statistics] Comparison of Three Correlation Coefficient: Pearson, Kendall, Spearman

    There are three popular metrics to measure the correlation between two random variables: Pearson's c ...

  7. mongoDb性能提升

    最近在弄MongoDB的时候 发现只按照官网的方式进行操作的话,性能不行,想着用单例模式封装一下,提升一下性能,代码如下: //引入mongodb相关的模块 const MongoClient = r ...

  8. Python读取和写入文件

    1 从文件中读取数据 1.1 读取整个文件 创建名为test的txt文本文件,添加内容如下所示: 123456789023456789013456789012 实现代码: with open('tes ...

  9. jenkins-构建job成功后自动打tag到git仓库

    需求:最近开发同事提出了个要求,每当Jenkins执行上线部署完成后,对当前代码进行自动打TAG到git仓库中,且只有当部署成功后才进行打TAG,防止构建失败也进行打过多的垃圾tag,然后便于下次进行 ...

  10. 数据挖掘入门系列教程(三)之scikit-learn框架基本使用(以K近邻算法为例)

    数据挖掘入门系列教程(三)之scikit-learn框架基本使用(以K近邻算法为例) 简介 scikit-learn 估计器 加载数据集 进行fit训练 设置参数 预处理 流水线 结尾 数据挖掘入门系 ...