webpack Babel 浏览器兼容性

简介: webpack Babel 浏览器兼容性

还是先看版本对应号 版本不对应 否则会报错*
在这里插入图片描述

为了解决浏览器兼容性的问题使用webpack的babel插件进行低版本的浏览器识别到时髦的js语法

1.安装命令 (注意对应的版本号)

npm install -D babel-loader @babel/core@7.5.4 @babel/preset-env@7.5.4

2.配置webpack.config.js文件

在这里插入图片描述

 {
                test: /\.m?js$/,
                exclude: /(node_modules)/,//排除的目录
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']//babel中内容的转换规则工具
                    }
                }
            }

在你的打包主文件写一段js的语法测试:
在这里插入图片描述
进行打包 npm run build 命令都是自己配置的 不会的看之前的课程都是连续剧

npm  run  build

在这里插入图片描述
运行命令npm run dev 进行热加载

npm  run dev

ie的低版本都可以正常使用es6语法了
在这里插入图片描述

相关文章
|
JavaScript
Webpack Babel (编译ES6/7)
Webpack Babel (编译ES6/7)
82 0
|
20天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
36 6
|
4月前
|
前端开发 JavaScript
webpack 和 babel 实用教程【前端必备】
webpack 和 babel 实用教程【前端必备】
49 0
|
6月前
|
自然语言处理 JavaScript 前端开发
拯救浏览器兼容性:Babel是前端开发的必备神器(一)
拯救浏览器兼容性:Babel是前端开发的必备神器
|
6月前
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
87 0
|
6月前
|
编解码 JavaScript 前端开发
Node.JS学习 | Babel | webpack | ES6
Node.JS学习 | Babel | webpack | ES6
80 0
Webpack5 系列(四):Babel 的配置2
Webpack5 系列(四):Babel 的配置2
129 1
|
JavaScript 前端开发
Webpack5 系列(四):Babel 的配置1
Webpack5 系列(四):Babel 的配置
574 1
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
129 0
|
Web App开发 JavaScript 前端开发
Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset
Edge浏览器报错IE解决 Expected identifier, string or number 配置 babel vue plugins Preset
349 0