webpack系列学习七(静态资源集成)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

今天我们来学习关于静态资源集成的内容：

• 关于图片的处理：图片格式
• 图片压缩：不影响视觉效果的前提下进行合理的压缩
• 第三方字体如何处理
• 多页面打包的通用方案

图片处理

1. 使用图片的场景
   • js dom
   • css
   • html img
2. 问题：
   • 图片名
   • 图片格式
   • 目录管理：图片、文件、css分开
     • 引用路径问题：
       • 前提：对资源文件做了目录管理
       • 对图片进行目录管理没有问题
       • 如果css和图片都做了目录管理，css中图片的路径就对不上了，通过设置file-loader中的publicPath来解决问题

• file-loader webpack 4x需要， 5x就不需要了

file-loader：处理静态资源模块

原理是把打包⼊⼝中识别出的资源模块，移动到输出⽬录，并且返回⼀个地址名称

所以我们什么时候⽤file-loader呢？

场景：就是当我们需要模块，仅仅是从源代码挪移到打包⽬录，就可以使⽤file-loader来处理，txt， svg， csv， excel，图⽚资源啦等等

安装: npm install file-loader -D

示例：

• index.js

// js dom引用
import pic from './images/img.jpg' // 用什么loader？file-loader、url-loader

const img = new Image()
img.src = pic
console.log('pic', pic)
const tag = document.getElementById('app')
tag.append(img)

console.log('hello webpack')


// css引用
import pic from './images/img.jpg' // 用什么loader？file-loader、url-loader

• css引用图片，修改less文件

body{
  div {
    display: flex;
    height: 100px;
    background: url(../images/img.jpg) 0 0 no-repeat; // 1.2 css中的图片
  }
}

• 修改webpack.config.js

// 未作目录管理
{
    test: /\.(png|jpe?g|gif|webp)$/, // 解决图片格式问题
    use: {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]' // 解决图片名的问题
      }
    }
},

// 对css和图片都做了目录管理
module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/, // 解决图片格式问题
        use: {
          loader: 'file-loader',
          options: {
            // name: 'images/[name].[ext]', // 方法二：不使用outputPath，在name中的名字前加上目录路径
            name: '[name].[ext]', // 解决图片名的问题
            outputPath: "images", // 解决问题目录管理：方法一：通过outputPath设置图片资源的存放位置
            // 图片资源如何引入的位置：解决对资源文件做了目录管理造成的路径引用出错问题
            publicPath: '../images', // ../images/img.jpg
          }
        }
      },
    ]
  },
  plugins: [
    new miniCssPlugin({
      filename: "style/index.css"
    }), // 样式抽取成独立的文件
  ],