前端必备技能 webpack - 5. webpack处理JS资源

每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。

点这里查看 webpack 系列文章目录

博客中的代码位于 码云Git仓库,如有需要可自行前往下载。

前端必备技能 webpack - 5. webpack处理JS资源

  webpack 默认就会对 js 资源进行处理,我们这里只需要对其进行压缩等操作即可。

一、 兼容性处理

  因为部分浏览器并不兼容 es6 语法,而我们在开发时经常会使用到各种新特性,所以就需要我们对各种特性进行兼容性处理,现在我们可以直接借助 webpack 来完成这项工作,主要有以下三种方式:

1.1 兼容基本语法

  老规矩,先下包,这里需要使用 babel 的三个包:

npm i babel-loader @babel/preset-env @babel/core -D

  我们新建一个 JS 的文件,并利于 es6 语法写一些低版本浏览器不能兼容的内容:

// index.html

const fn = () => {
   
    console.log("index.js");
}

new Promise(resolve => {
   
    setTimeout(() => {
   
        resolve('hello')
    }, 2000)
}).then(res => {
   
    console.log(res)
})

  修改配置文件:

// webpack.config.js

module: {
   
rules: [
	{
   
		test: 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值