Vue3+TS Day07 - webpack 加载静态资源、插

一、 静态资源的 loader

1、file-loader 的作用是什么？基本用法是什么？

• file-loader 的作用就是帮助我们处理 import/require()方式引入的一个文件资源，并且会将它们放到我们输出的文件夹中

image.png image.png image.png image.png image.png

2、下面加载图片资源的方式能成功吗？

// 设置 img 元素的 src
const imgEl = document.createElement('img');
imgEl.src = "../img/zznh.png";
document.body.appendChild(imgEl);

• 不能，字符串无法被识别解析，最终会找不到对应图片

import zzhnImage from '../img/zznh.png';

// 设置 img 元素的 src
const imgEl = document.createElement('img');
imgEl.src = zzhnImage;
document.body.appendChild(imgEl);

3、url-loader 对比 file-loader 有什么异同？

• 同：都是对文件资源进行打包，url-loader 和 file-loader 工作方式相似
• 异：url-loader 可以将较小的文件，转成 base64 的 URI

image.png image.png

4、什么是 asset module type？

• asset module type是 webpack 内置的 loader，用于替代 file-loader、url-loader；

image.png image.png image.png

5、如果我们需要加载字体文件要怎么做？

image.png image.png

二、webpack 的 Plugin

1、loader 和 plugin 有什么区别？

• Loader 是用于 特定的模块类型进行转换；
• Plugin 可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等等；

image.png

2、认识 CleanWebpackPlugin 插件？

image.png

3、认识 HtmlWebpackPlugin 插件？认识 DefinePlugin 插件？

image.png image.png image.png image.png image.png

4、认识 CopyWebpackPlugin

• 在 vue 的打包过程中，如果我们将一些文件放到 public 的目录下，那么这个目录会被复制到 dist 文件夹中

image.png

5、认识 mode 配置，便于 debug 调试代码

// 模拟代码报错
console.log(content.aaa);

报错，无法定位

• 在 webpack.config.js 配置开发模式，就可以定点到错误代码了。

// webpack.config.js
module.exports = {
  // 设置模式
  // development 开发阶段，会设置 development
  // production 准备打包上线的时候，设置 production
  mode: "development",

  // 设置 source-map，建立 js 映射文件，方便调试代码和错误
  devtool: "source-map",
}

成功定位到错误代码出错的源文件 image.png image.png