Vue3和TypeScript学习笔记coderwhyDay07之webpack打包其他资源

以下仅了解基本使用方法，现实中使用时多查官方文档和github

loader

file-loader（弃）

处理jps、png等格式图片，对应的loader为file-loader
1.安装npm install file-loader -D
2.配置处理图片的url

 {
	test: /\.(png|jpe?g|gif|svg)$/i,
	use: {
          loader: "file-loader"
	 }
}

打包完后，dist下多出一个图片。
我们会发现图片的名称是一串复杂数字，那么，我们要不要把引入的图片路径进行更改呢？不需要。webpack帮我们做了这些事情。
注意：修改一次源代码就要重新打包

对于div元素设置background-image的css属性来加载图片，以上方式完全OK。但是，如果使用img元素的src属性来加载图片，我们需要把图片资源模块化。
import/require()方式引入一个文件资源，并且会将它放到我们输出的文件夹中

//import导入图片资源
import zzhnImage from '../img/zznh.png';

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

document.body.appendChild(imgEl);

那么，怎样做才能图片导出到指定文件夹并对图片命名？
开发中，我们会遇到相同名字的不同图片，使用hash值有效防止图片名字的重复。

 {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            // outputPath: "img",
            //name:"[name]_[hash:6].[ext]" //这两条等价于下面name
            //图片被打包到build/img下
            name: "img/[name]_[hash:6].[ext]"
          }
        }
      }

---

url-loader（弃）

url-loader和file-loader工作方式是相似的，但是可以将较小的文件，转成base64的URI
npm install url-loader -D

当我们向服务器发送请求时，可能会传过去很多图片资源，每张图片都进行请求，造成服务器请求压力。
可以进行优化。
精灵图：多张小图片整合到一张图片上，这样就减少了图片请求次数。
将图片转成base64URI，在js或css中使用，顺带传过去，浏览器进行相应解析，也减少图片请求次数。

url-loader可以替换file-loader

      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: {
          loader: "url-loader",
          options: {
            //图片被打包到build/img下
            name: "img/[name]_[hash:6].[ext]",
            //小于100kb的图片进行base64编码
            limit: 100 * 1024 
          }
        }
      },

---

asset module type（推荐）

注意：
webpack5中file-loader和url-loader都不在使用了
最新方式不用下载loader了

在webpack5之前，加载资源使用一些loader，比如raw-loader、url-loader、file-loader
在webpack5之后，我们直接使用资源模块类型（asset module type）来代替上面的这些loader

**资源模块类型（asset module type）**通过添加4种新的模块类型，来替换这些loader
asset/resource发送一个单独的文件并导出URL 之前通过file-loader实现
asset/inline导出一个资源的data URI，之前使用url-loader实现
asset/source导出资源的源代码， 之前raw-loader
asset在导出data URI和发送一个单独的文件中自动选择

 {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      }

字体打包

特殊的字体或者字体图标，引入相关的字体文件
处理eot、ttf、woff等文件

1.使用file-loader

      {
        test: /\.(eot|ttf|woff2?)$/,
        use: {
          loader: "file-loader",
          options: {
            // outputPath: "font",
            name: "font/[name]_[hash:6].[ext]"
          }
        }
      }

2.asset/resource方式

      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      }

注意细节：file-loader中打包名字的是name
asset/resource用的是filename

---

Plugin

每次打新的包，都要把原来产生的文件删掉。可是，每次手动删都很麻烦，怎么办？我们可以使用插件。
Loader是用于特定的模块类型进行转换
Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等
loader帮我们加载某些模块

---

CleanWebpackPlugin

用途：自动删除dist文件夹，重新打包
1.安装npm install clean-webpack-plugin -D
2.webpack.config.js手动导入并配置
我们之前在使用loader时并不需要手动导入

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports={
	//其他配置
	plugins: [
    new CleanWebpackPlugin(),
	]
}

---

HtmlWebpackPlugin

我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html的
在进行项目部署时，必然也需要有对应的入口文件index.html
所以我们也需要对index.html进行打包处理

1.安装
npm install html-webpack-plugin -D
2.引入并配置

const HtmlWebpackPlugin = require("html-webpack-plugin");

new HtmlWebpackPlugin({
      title: "哈哈哈哈"
})

我们会发现自动在dist文件夹下生成了一个index.html文件。该文件自动添加了我们打包生成的bundle.js文件

---

DefinePlugin

自定义HTML模板
如果我们想要在自己的模板中添加一些比较特别的内容：
noscript标签，在用户的JavaScript被关闭时，给予响应的提示
开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签

这就需要我们有一个属于自己的index.html模板
语法<% 变量 %>，这个是EJS模块填充数据的方式
在编译template模板时，需要插件DefinePlugin。允许在编译时创建配置的全局变量，是webpack内置的插件（不需要安装）

<!--通过definePlugin配置全局常量 BASE_URL-->
 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--通过htmlwebpackplugin配置 title-->
 <title><%= htmlWebpackPlugin.options.title %></title>

---

const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
    new HtmlWebpackPlugin({
    //指定要使用模板所在路径
      template: "./public/index.html",
     //读取htmlWebpackPlugin.options.title时会读到title信息
      title: "哈哈哈哈"
    }),
    new DefinePlugin({
      BASE_URL: "'./'"
    }),
  ]

---

CopyWebpackPlugin

在vue打包过程中，将一些文件放到public目录下，这个目录会被复制到dist文件夹中。这个复制的功能，可以使用CopyWebpackPlugin。
1.安装
npm install copy-webpack-plugin -D
2.导入并配置
from：设置从哪一个源中开始复制
to：复制到的位置，可省略，默认复制打包到的目录下
globOptions：设置额外的选项

const CopyWebpackPlugin = require('copy-webpack-plugin');

 new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "./",
          globOptions: {
            ignore: [
            //已经通过htmlwebpackplugin完成index.html生成，不需要复制html模板了
              "**/index.html"
            ]
          }
        }
      ]
    }

---

Mode配置

我们前面操作中，不难发现一个问题。源码错了再进行打包，那么所有代码打包到一行，看浏览器调试信息，不知道哪里出错，很难定位。
怎么解决呢？我们应该尝试让打包的bundle.js尽量能看到

webpack添加一个配置。设置为开发模式和source-map。
source-map作用：生成对应源代码时也生成对应的map文件。
这样，我们浏览器显示报错信息的时候就会映射到确定的错误位置。

webpack.config.js配置

module.exports = {
  // 设置模式
  // development 开发阶段, 会设置development
  // production 准备打包上线的时候, 设置production
  mode: "development",
  // 设置source-map, 建立js映射文件, 方便调试代码和错误
  devtool: "source-map"
 
 //更多配置
}

补充笔记
注意：插件的使用没有书写顺序
CleanWebpackPlugin:自动删除dist文件夹，重新打包
HtmlWebpackPlugin:对html打包处理
DefinePlugin:允许在编译时创建配置的全局变量，是webpack内置的插件
CopyWebpackPlugin:放到public目录下，这个目录会被复制到dist文件夹中

---

• 以上仅是简单入门了解，更多内容看官网配置
  webpack官网文档
• 以上笔记参考coderwhy老师的Vue3和TypeScript。
  老师讲课链接：课程链接