(理解)webpack对图片资源的特殊处理

(理解)webpack对图片资源的特殊处理

import "css文件的地址"//css文件引入js跟webpack形成依赖图(不需要额外配置)
//创建div元素,设置背景
const divBgEl = document.createElement("div")
divBgEl.classList.add('img-bg')
document.body.append(divBgEl)

//css文件
.bg-image{
  background-image:url("../img/nhlt.jpg");//就是填入图片
  width:500px;
  height:500px
}

进行打包,图片会被重命名,是基于哈希算法生成的哈希值命名

//打包图片,并且这图片有自己的地址,将地址设置到img/bgi中(打包图片命名是哈希算法生成)
type:"asset/resource"
//对图片使用了base64编码,图片编译形成的源码内容放到了行内(也就是放到了js文件),所以打包的文件里面就看不到图片了,但js的文件就变得很大
type:"asset/inline"

//base64编码优势:少发送 当前图片数量(比如两张图片就两次网络请求) 的网络请求,因为第一种方式图片放在服务器上后,要进行http请求图片,而base64就跟着js文件一起下载下来了
//base64编码的劣势:js文件变大,下载文件本身时间过长,造成js代码的下载和解析/执行时间过长。用户长时间都只能看着空白界面等待文件的下载

//合理的规范
//1.对于小一点的图片,可以进行base64编码
//2.对于大一点的图片,单独的图片打包,形成url地址,单独的请求这个url图片

image-20230218124039433

url-loader的limit效果
  • 开发中我们往往是小的图片需要转换,但是大的图片直接使用图片即可
    • 这是因为小的图片转换base64之后可以和页面一起被请求,减少不必要的请求过程
    • 大的图片也进行转换,反而会影响页面的请求速度
  • 我们需要两个步骤来实现:
    • 步骤一:将type修改为asset;
    • 步骤二:添加一个parser(解析)属性,并且制定dataUrl(地址数据)的条件,添加maxSize(最大的大小)属性
rules:[
  {
    test:/\.(png|svg|jpg|jpe?g|gif)$/,
    type:"asset",//这是最好的选择,会自动选择合理的规范
    generator:{
      filename:"img/{name}.{hash:6}{ext}"
    },
    parser:{
      dataUrlCondition:{//数据地址条件
        maxSize:100 * 1024//以什么尺寸作为分界线(单位是byte字节)
      }
    }
  }
]

(掌握)webpack对JS代码的babel处理

为什么需要babel?
  • 事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:
    • 开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的
    • 所以,学习Babel对于我们理解代码从编写到线上的转变过程至关重要
  • 那么,Babel到底是什么呢?
    • Babel是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript
    • 包括:语法转换、源代码转换等
Babel命令行使用
  • babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用

  • 如果我们希望在命令行尝试使用babel(也就是独立使用,不配合webpack使用),需要安装如下库:

    • @babel/core:babel的核心代码,必须安装
    • @babel/cli:可以让我们在命令行使用babel
  • 使用babel来处理我们的源代码:

    • src:是源文件的目录
    • –out-dir:指定要输出的文件夹dist
    npx babel src --out-dir dist
    
插件的使用
  • 比如我们需要转换箭头函数,那么我们就可以使用箭头函数转换相关的插件:
npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
npxnpx 是 npm 5.2.0 版本以上提供的命令行工具,用于在命令行中运行安装在本地的 node 模块。这里使用 npx 来运行 babel 命令,避免在全局安装 Babel 的情况下产生冲突
babelbabel 是一个 JavaScript 编译器,可以将新版本的 JavaScript 代码转换为旧版本的语法,以确保代码能够在更多的浏览器或环境中运行。这里使用 babel 命令对指定目录下的 JavaScript 代码进行转换
src要转换的源代码目录
–out-dir dist指定转换后的代码输出到 dist 目录
@babel/plugin-transform-arrow-functions指定使用 @babel/plugin-transform-arrow-functions 插件来转换 ES6 箭头函数语法。该插件的作用是将箭头函数转换为普通的函数表达式,以确保代码能够在不支持箭头函数的环境中正常运行
  • 查看转换后的结果:我们会发现 const 并没有转成 var

    • 这是因为 plugin-transform-arrow-functions,并没有提供这样的功能
    • 我们需要使用 plugin-transform-block-scoping 来完成这样的功能
    npm install @babel/plugin-transform-block-scoping -D//转化const、let这些ES6语法
    npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping
    ,@babel/plugin-transform-arrow-functions
    //es6的语法很多,要转化一个个的安装会很麻烦,而且到时候写进rules也会很多,所以我们除了等等会使用预设之外,我们还要将他跟刚刚一样抽取出去,让webpack.config.js更简洁一点。
    //抽取到哪?当然是我们自己创建一个babel.config.js,然后放进去啦
    
    //babel.config.js
    module.exports = {
      plugin:[
        "@babel/plugin-transform-arrow-functions"
        "@babel/plugin-transform-block-scoping"
      ]
    }
    

然后就可以省略掉下面这部分

image-20230219024621104

Babel的预设preset
  • 但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset):

    • 安装 @babel/preset-env 预设,是指安装一个 Babel 预设模块,用于根据所配置的目标环境,自动选择并使用一组适用于目标环境的 Babel 插件。该预设包含了所有与 JavaScript 新语法相关的转换插件,并根据所配置的目标环境,自动选择需要的插件进行转换
    • 后面我们再具体来写预设代表的含义
  • 安装@babel/preset-env预设:

    npm install @babel/preset-env -D
    
  • 执行如下命令:

    npx babel src --out-dir dist --presets=@babel/preset-env
    
  • 安装完预设之后,我们刚刚创建的babel.config.js就需要做出一点转变了,因为预设(presets)跟配置(plugins)是分开的

module.exports = {
  //没有plugins了,有预设就不需要plugin了。他们是分开算的,但是预设里面已经基本包含了
  presets:[
    "@babel/preset-env"
  ]
}
babel-loader
  • 在实际开发中,我们通常会在构建工具中通过配置babel来对其进行使用的,比如在webpack中

  • 那么我们就需要去安装相关的依赖:

    • 如果之前已经安装了@babel/core,那么这里不需要再次安装
    npm install babel-loader -D
    
  • 我们可以设置一个规则,在加载js文件时,使用我们的babel

module: [
  rules: [
    {
      test: /\.js$/,
      use: {
        loader: "babel-loader"
      }
    }
  ]
]
babel-preset
  • 如果我们一个个去安装使用插件,那么需要手动来管理大量的babel插件,我们可以直接给webpack提供一个preset,webpack会根据我们的预设来加载对应的插件列表,并且将其传递给babel

  • 比如常见的预设有三个:

    • env(主要针对ES6语法)
    • react
    • TypeScript
  • 安装preset-env:

npm install @babel/preset-env
  • 18
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值