学习Webpack中图片-JS-Vue-plugin

图片文件

需要先在项目中使用图片，比较常见的使用图片的方式是两种：

img元素，设置src属性
其他元素（比如div），设置background-image的css属性

在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader、url-loader、file-loader

在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader

资源模块类型

资源模块类型是指用于处理非 JavaScript 文件（例如 CSS、图像、字体等）的一种机制

常见的资源模块类型包括以下几种：

asset/resource：
- 用途：用于将文件（如图像、字体等）导出为单独的文件，并返回该文件的 URL（即路径）
- 作用：类似于 file-loader，会在构建时将文件移到输出目录，最终导出的 JavaScript 会引用文件的 URL
- 适用文件类型：图像（如 .png, .jpg），字体文件（如 .woff, .ttf），音视频文件等
asset/inline：
- 用途：用于将文件（如小图像）以 Base64 字符串的形式嵌入到最终的 JavaScript 中，而不生成单独的文件
- 作用：类似于 url-loader，用于将文件转为 Data URL（Base64 编码），适合小文件，以减少 HTTP 请求
- 适用文件类型：小图像、字体等文件，尤其是文件较小的情况
asset/source：
- 用途：用于导出文件的源代码内容，而不是将它们打包成单独的文件或 Base64 字符串
- 作用：类似于 raw-loader，返回文件的源代码内容作为 JavaScript 模块导出的字符串。适用于直接想以字符串形式引入文件内容的情况
- 适用文件类型：文本文件（如 .txt, .svg, .md），CSS 或其他代码文件
asset：
- 用途：一种通用的资源模块类型，它可以在 asset/resource 和 asset/inline 之间动态切换
- 作用：类似于 url-loader，Webpack 会根据文件大小自动选择是将文件作为资源输出还是内联到代码中。如果文件大小超过指定限制（默认是 8KB），它会导出为资源文件；否则会作为内联文件处理
- 适用文件类型：图片、字体、音频、视频文件等
javascript/auto：
- 用途：这是 Webpack5 默认的 JavaScript 模块类型，用于处理 CommonJS、ES Modules 和其他类型的 JavaScript 文件
- 作用：可以处理所有的 JavaScript 文件，并支持混合的模块类型（例如，既有 import 也有 require 的文件）
- 适用文件类型：.js, .cjs, .mjs 文件
javascript/esm：
- 用途：明确指定该模块只能使用 ECMAScript 模块（ESM）的模块类型
- 作用：主要用于现代 JavaScript 的 ES 模块化，import 和 export 语法
- 适用文件类型：通常是 .mjs 文件，也可以是 .js 文件，但明确支持 ESM

上面主要介绍了四种处理图片的类型，打包图片时也可以加自定义设置：

自定义文件的输出路径和文件名：

常用的占位符：

[ext]：处理文件的扩展名

[name]：处理文件的名称

[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）

方式一： 修改output，添加assetModuleFilename属性

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),assetModuleFilename: "img/[name].[hash:6][ext]", // 放img目录下 图片名字.hash的前六位 扩展名},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset",},],},
};

在这里插入图片描述

方式二： 在Rule中，添加一个generator属性，并且设置filename

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),// assetModuleFilename: "img/[name].[hash:6][ext]", // 放img目录下 图片名字.hash的前六位 扩展名},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset",generator: {filename: "image/[name].[hash:8][ext]",},},],},
};

在这里插入图片描述

图片大小设置

开发中往往是小的图片需要转换，但是大的图片直接使用图片即可
是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程
而大的图片也进行转换，反而会影响页面的请求速度

将type修改为asset，添加一个parser属性，并且制定dataUrlCondition，添加maxSize属性

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset",generator: {filename: "image/[name].[hash:8][ext]",},parser: {dataUrlCondition: {maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用},},},],},
};

JS文件

开发中，想要使用ES6+的语法，想要使用TypeScript，开发React项目，这些文件的处理它们都是离不开Babel的

babel

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分，学习Babel对于我们理解代码从编写到线上的转变过程至关重要

Babel是一个工具链，主要用于旧浏览器或者环境中将ES6+``代码转换为向后兼容版本的JavaScript，包括语法转换、源代码转换等

命令行使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用

如果希望在命令行尝试使用babel，需要完成如下操作：

npm install @babel/cli @babel/core -D
- @babel/core：babel的核心代码，必须安装
- @babel/cli：可以让我们在命令行使用babel
npx babel src --out-dir dist：使用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
- 查看转换后的结果：会发现 const 并没有转成 var
  
  npm install @babel/plugin-transform-block-scoping -D
  
  npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions
- 如果要转换的内容过多，一个个设置是比较麻烦的，可以使用预设（preset）：
  
  npm install @babel/preset-env -D
  
  npx babel src --out-dir dist --presets=@babel/preset-env

babel-loader

在实际开发中，通常会在构建工具中配置babel来对其进行使用的，比如在webpack中

之前已经安装了@babel/core，不需要再次安装
npm install babel-loader -D
可以设置一个规则，在加载js文件时，使用babel

babel-preset

如果一个个去安装使用插件，需要手动来管理大量的babel插件，可以直接给webpack提供一个preset，webpack 会根据预设来加载对应的插件列表，并且将其传递给babel

常见的预设有三个：env，react，TypeScript
安装preset-env：npm install @babel/preset-env

添加wk.config.js配置

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset",generator: {filename: "image/[name].[hash:8][ext]",},parser: {dataUrlCondition: {maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用},},},{test: /\.m?js$/,use: [{loader: "babel-loader",options: {// presets: [//   [//     "@babel/preset-env",//     {//       targets: "> 0.25%, not dead",//       useBuiltIns: "usage",//       corejs: 3,//     },//   ],// ],presets: ["@babel/preset-env"],},},],},],},
};

Vue文件

编写vue代码

// app.vue
<template><div class="box-vue"><h2>hello vue</h2><p>哈哈哈哈哈</p></div>
</template><script setup></script><style>.box-vue {width: 100px;height: 100px;background: cyan;}
</style>// index.js
import "./style.css";
import "./style.less";
import "./bgImg.css";
import App from "./app.vue";
import { createApp } from "vue/dist/vue.esm-bundler.js";
const img = require("./images/2.jpg");const divEl = document.createElement("div");
divEl.innerHTML = `<div class='box-css'>hello css</div><div class='box-less'>hello less</div><div class='bgImg'></div><image class='img' src='${img}' />`;
divEl.className = "box";
document.body.appendChild(divEl);createApp(App).mount("#app");

打包会报错，我们需要安装vue-loader

vue-loader

npm install vue-loader -D：安装vue-loader
添加配置wk.config.js：{ test: /\.vue$/, loader: "vue-loader" }
这时在打包依然会报错，因为需要添加 @vue/compiler-sfc 来对template进行解析

@vue/compiler-sfc

npm install @vue/compiler-sfc -D：安装@vue/compiler-sfc，如果安装vue时自动安装了就不需要安装了

需要配置对应的Vue插件：

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},plugins: [new VueLoaderPlugin()],module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset",generator: {filename: "image/[name].[hash:8][ext]",},parser: {dataUrlCondition: {maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用},},},{test: /\.m?js$/,use: [{loader: "babel-loader",options: {presets: ["@babel/preset-env"],},},],},{test: /\.vue$/,loader: "vue-loader",},],},
};

plugin

上面打包vue我们引入了个新的知识插件，接下来学习plugin相关内容

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：
在这里插入图片描述

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

在这里插入图片描述

CleanWebpackPlugin

前面练习的过程中，每次修改了一些配置，重新打包时都需要手动删除dist文件夹，可以借助于一个插件来帮助完成就是 CleanWebpackPlugin

npm install clean-webpack-plugin -D：安装
在wk.config.js中配置

也可以使用Webpack5 内置的 clean 功能https://webpack.docschina.org/configuration/output/#outputclean
我们可以先在你打包后的文件夹创建个abc.js，然后配置完执行打包命令就可以看到它会把你打包文件夹下的abc.js删除

HtmlWebpackPlugin

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

npm install html-webpack-plugin -D：对HTML进行打包处理使用另外一个插件：HtmlWebpackPlugin
配置wk.config.js
执行打包命令后，发现自动在build文件夹中，生成了一个index.html的文件，该文件中也自动添加了我们打包的index.js文件
html默认情况下是根据ejs的一个模板来生成的，在html-webpack-plugin的源码中，有一个default_index.ejs模块
也可以修改打包index.html的内容
- 自定义HTML模板
  
  比如添加一个noscript标签，在用户的JavaScript被关闭时，给予相应的提示
  
  比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标<div id="app">
- 自定义模板数据填充
  
  上面的html中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式
  
  title：可以在进行htmlWebpackPlugin.options.title读取时，就会读到该信息
  
  template：指定我们要使用的模块所在的路径
  
  filename：生成的HTML文件名
  
  inject：插入打包的资源文件，默认值为 true。可以设置为 'head' 或 'body' 来指定资源注入的位置。
  
  minify：对生成的 HTML 进行压缩（常用于生产环境） collapseWhitespace: 去除空白，removeComments: 移除注释，removeAttributeQuotes: 移除属性的引号

配置wk.config.js并打包

// ./public/index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"/><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= webpackConfig.name %> doesn't work properly withoutJavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>// wk.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: "./src/index.js",output: {filename: "index.js",path: path.resolve(__dirname, "build"),},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: "haahha",template: "./public/index.html",filename: "main.html",minify: {collapseWhitespace: true, // 移除空白removeComments: true, // 移除注释removeAttributeQuotes: true, // 移除属性的引号},}),],module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader", "postcss-loader"],},{test: /\.less$/,use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset",generator: {filename: "image/[name].[hash:8][ext]",},parser: {dataUrlCondition: {maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用},},},{test: /\.m?js$/,use: [{loader: "babel-loader",options: {presets: ["@babel/preset-env"],},},],},{test: /\.vue$/,loader: "vue-loader",},],},
};