1.安装Balel目的:

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

Balel 可以帮我我们将高级的语法转为低级的语法。

2.安装命令

npm install babel-loader @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/runtime -D

3.webpack.config.js配置模块规则

module.exports = {
module: {
rules: [      
        {
test: /\.js$/, exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
],
plugins: [
[require("@babel/plugin-transform-runtime"), { "legacy": true }],
[require("@babel/plugin-proposal-class-properties"), { "legacy": true }]
]
}
}
]
}
]
}
}

  

4.webpack 重新编译下 npm run build 

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

  1. [转] webpack中配置Babel

    一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...

  2. webpack中配置Babel

    Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...

  3. webpack中配置babel时遇到的问题

    1.Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/cor ...

  4. 深入浅出的webpack构建工具---babel之配置文件.babelrc(三)

    阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel ...

  5. webpack详细配置解析

    阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...

  6. webpack动态配置多静态资源路径,动态配置多上线路径,配置less,多种图片引用方式----"webpack": "^4.41.6",

    1.项目场景是有两个静态资源目录,一个用于开发,一个用于发布,上线多个版本,打包多个版本后,也要部署到同一个服务器的同一个端口下. 根据我自己的摸索,我搞出来了下面的配置,自感觉还蛮好用的 先看我的c ...

  7. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

  8. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  9. 从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack 核心概念: Entry: 入口 Module:模块,webpack中一切皆是模块 Chunk:代码库,一个chunk由十多个模块组合而成,用于代码合并与分割 Loader:模块转换器, ...

  10. webpack常用配置总结

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

随机推荐

  1. Django-Django基本使用、app、三板斧

    1.纯手撸web框架 1.web框架的本质 理解1:连接前端与数据库的中间介质 理解2:socket服务端 2.手写web框架 1.编写socket服务端代码 2.浏览器访问响应无效>>& ...

  2. WAVE音频文件格式及其64位扩展格式的简要介绍

    正文 关于 WAVE 文件格式,网上有不少介绍,但关于WAVE 64位扩展格式的介绍却是几乎没有. 所以本文的目的是简要介绍标准的 WAVE 格式,以及两种主要的扩展格式. 文中所有代码都用C语言来描 ...

  3. 逆天的Zstack-工控机上测试

    放假前一直在服务器上折腾Zstack跑数据库,调IOC.正好手头有个32G内存,intel i7处理器的工控机,就试试装Zstack跑跑看,想着即使重负荷的跑不了,跑跑docker之类的也行.装成功后 ...

  4. Vue3中的响应式api

    一.setup文件的认识 特点1:script 中间的内容就是一个对象 特点2:script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性  => 顶层的绑定回被暴露给模板( ...

  5. .NET 8 预览版 1:NativeAOT 升级和新的Blazor United

    .NET团队 今天在官方博客上 发布了.NET 8的第一个预览版,.NET 8 是一个长期支持 (LTS) 版本[1],.NET 的版本包括产品.库.运行时和工具,是 Microsoft 内部和外部多 ...

  6. redis(1)NoSQL数据库简介

    1.1 技术发展 redis是用来解决性能问题的数据库 技术的分类: 解决功能性问题:Java.Jsp.RDBMS.Tomcat.HTML.Linux.JDBC.SVN 解决扩展性问题:Struts. ...

  7. LKWA靶机学习

    LKWA靶机学习 目录 LKWA靶机学习 1 下载地址 2 Blind RCE 2.1 利用Burpsuite Collaborato模块来查看输出. 2.2 尝试利用dnslog进行回显 3 XSS ...

  8. nodemon 实现 TypeScript 项目热部署

    下载安装 ts-node.nodemon: npm i -D ts-node nodemon 配置package.json脚本: "dev": "nodemon --wa ...

  9. LeetCode-386 字典序排数

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/lexicographical-numbers 题目描述 给你一个整数 n ,按字典序返回范围 [ ...

  10. 【7】java之正则表达式

    一.正则标记 ​ 所有的正则可以使用的标记都在 java.util.regex.Pattern 类里定义. 1.1 单个字符 字符:表示由一位字符所组成: \\\\:表示转义字符"\\&qu ...