为什么我用webpack5打包之后，项目更大了？
目录结构是这样的
index.html
index.js
index.less
webpack.config.js
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "built.js",
path: resolve(__dirname, "build"),
},
module: {
rules: [
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
// 处理图片资源 webpack5图片新打包方法
test: /\.(jpg|png|gif)$/,
// webpack5中使用assets-module（url-loader已废弃）
type: "asset",
parser: {
dataUrlCondition: {
// 小于15kb的图片转换成base64（一般建议0-12kb的转换成base64） 注意：webpack这里没有对图片进行压缩，原来是多大就是多大（经过实测）
maxSize: 15 * 1024,
// base64
// 优点
// base64格式的图片是文本格式，降低了资源服务器的损耗。
// 网页中使用base64格式的图片时，不再请求服务器调用图片资源，减少了对服务器的请求次数。
// base64编码的字符串更适合不同平台、不同语言的传输。
// 缺点
// base64格式的文本内容较多，存储在数据库中增大了数据库的压力
// 网页加载虽然不用再请求服务器了，但是base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验
// base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css, 这比直接缓存图片要查很多，而且一般html改动比较频繁，所以等同得不到缓存效益
},
},
generator: {
//自定义图片打包的位置和文件夹名
filename: "img/[name].[hash:6][ext]",
publicPath: "./",
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
},
{
test: /\.(htm|html)$/i,
use: {
loader: "html-withimg-loader",
options: {
esModule: false,
},
},
},
],
},
plugins: [
//功能：默认会创建一个空的HTML，引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制./src/index.html文件
template: "./src/index.html",
}),
],
mode: "development",
};
然后我去看了一下体积
src
build
src-index.js
build-built.js
我看打包后的图片size也是一样的。打包的意义在哪里呢？
