(理解)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图片

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

npx	npx 是 npm 5.2.0 版本以上提供的命令行工具，用于在命令行中运行安装在本地的 node 模块。这里使用 npx 来运行 babel 命令，避免在全局安装 Babel 的情况下产生冲突
babel	babel 是一个 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"
    ]
  }
  

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

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