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. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  2. python保留2位小数

    1 代码: ​ 2 运行结果: ​ 3 其中字符串形式的:print('%.2f' % (x/y))方式最好

  3. TabActivity中的Tab标签详细设置

    参考链接: http://www.iteye.com/topic/602737 这个写的很不错,我是跟着一步步写下来的,不过到最后也遇到了麻烦,就是不能将Tab标签的文字和图片分开,始终是重合的,而且 ...

  4. Linux用户组的添加及属性的更改

    用户组的创建: 12345 groupadd [OPTION] 组名 -g GID 指明GID号:[GID_MIN, GID_MAX] -r 创建系统组 CentOS 6: ID<500 Cen ...

  5. APP倒闭:你充值的钱会蒸发吗?

    有一句说到吐,但却又不得不说的话:资本大潮退去,才知道谁在裸泳.随着资本寒冬的来临,互联网上众多看起来狂飙突进的项目却呈现迅速萎靡态势.尤其是众多具有互联网元素的油卡.洗衣.保洁等成为重灾区,其中不少 ...

  6. 第一章 感受mac之美-换一种方式用电脑,开启新历程

    感谢关注我的读者一直以来的追随与信任.去年到今年以来大环境都不是很好.裁员,机构优化,工厂倒闭,公司破产,贸易战等消息传来,不少还是身边发生的.今年开年以来更是有病毒横行,天降蝗灾等灾害.愿大家都好好 ...

  7. 新冠疫情下,亚德诺(ADI)全面加速

    前言:亚德诺Analog Devices, Inc.(简称ADI),公司总部设在美国马萨诸塞州诺伍德市,设计和制造基地遍布全球.ADI公司被纳入标准普尔500指数(S&P 500 Index) ...

  8. javascript功能插件大集合 前端常用插件 js常用插件

    转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具.•npm – npm 是 javascript 的包管 ...

  9. vue 组件中添加样式不生效

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v ...

  10. Eclipse与MyEclipse的联系和区别

    Eclipse与MyEclipse的联系和区别  Eclipse 是一个IDE(Integrated Developing Environment),而这个IDE是允许安装第三方开发的插件来使自身的功 ...