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. mysql02-配置文件my.ini

     https://www.cnblogs.com/isme-zjh/p/11542106.html   1.mysql安装-连接   1.1安装 略   1.2连接-退出 连接 mysql –h 主机 ...

  2. 【CodeSmith】The System.Data.SQLite library is not installed on this computer,不能使用SQLite解决办法

    1.出现问题原因 1)System.Data.SQLite 尚未安装在您的计算机上 2)System.Data.SQLite 尚未正确配置 2.下载并安装System.Data.Sqlite [注意] ...

  3. ubuntu18.04下联想电脑不能打开wifi

    一.问题描述: 本人使用联想拯救者14IFI笔记本在安装Ubuntu系统时会出现无线硬件开关关闭的问题,当然也就无法连网(Wi-Fi). (最好先使用 sudo rfkill unblock all) ...

  4. Linux服务器数据备份恢复

    转载csdn: https://blog.csdn.net/weixin_33794672/article/details/92894022

  5. Linux 下的十一款一流备份实用工具

    转载:linux.中国 https://linux.cn/article-7183-1.html

  6. 关于Visual Studio使用头文件"stdafx.h"报错原因

    当我们需要使用"stdafx.h"该头文件时,Visual Studio会报错,提示我们无法打开源文件"stdafx.h",实际上在Visual Studio中 ...

  7. Angular UI库

    1.angular 使用 bootstrap 安装bootstrap npm install bootstrap --save 安装bootstrap-icons npm i bootstrap-ic ...

  8. 工业仿真:Chai 3D之点云技术

    推荐:将 NSDT场景编辑器 加入你的3D开发工具链. 介绍   点云是三维坐标系中的一组数据点.在 CHAI3D 中,这些点由 X.Y 和 Z 坐标定义,通常用于表示对象的外表面.   点云可以由3 ...

  9. JavaScript之void

    void是什么 void是JavaScript重要的关键字,该操作符指定要计算一个表达式但不返回. 语法格式: void func() javascript:void func() 或 void (f ...

  10. LOJ3075 「2019 集训队互测 Day 3」组合数求和

    题意: 令 \(f(j)=\sum\limits_{i=0}^{n-1}\dbinom{id}{j}\) ,对于 \(0\le j <m\) ,分别求出 \(f(j)\) .答案对 \(M\) ...