webpack_（第二章）_浅析webpack打包输出的内容_webpack显示打包之后有哪些assets和chunks-CSDN博客

本文链接：https://blog.csdn.net/hani_wen/article/details/93088731

本文围绕Webpack打包知识点展开，介绍了打包时输出信息的含义，如Hash、Version、Time等，还说明了Chunks、Chunks Name等概念。同时提到打包过程中入口文件的显示，以及配置文件中mode设置对打包文件是否压缩的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅谈webpack打包知识点
在上次完成webpack基本配置之后
运行npm run bundle 打包
可以看到在我们打包的时候，输出了非常多的提示命令，那输出的这些信息是什么意思呢？
在这里插入图片描述
1.Hash：对应的是本次打包唯一的Hash值
2.Version：使用的是Webpack的版本
3.Time：当前这个包整体的打包耗时
4.Asset：下面有个index.js文件，表示我们打包出了一个index.js文件，Size指的是这个文件有1.06KiB，5.Chunks指的是：现在我们只打包出了一个文件，有的时候我们做复杂打包的时候，会打包出很多文件，每个文件都会有一个自己的id值，Chunts放置的不止是自己这个文件对应的id值，有可能index.js在大型项目中还和其他的一些js文件有关系，那么其他的文件打包出来的js文件的id也放在Chunks中
6.Chunks Name指的是：Chunks里面放置的是每个js文件的id，Chunks Names放置的是每个js文件对应的名字。
实际上，我们在配置文件中entry后面跟着字符串，实际上是main的简写
在这里插入图片描述

所以Chunks Name的name就是entry里面配置的name
7. Entrypoint main = index.js: 显示整个打包过程中入口文件是哪一个，接着会进行打包，首先打包index.js, 里面会用到header.js。打包完成
8. WARNING in configguration 警告: 在webpack配置的时候，没有指定打包的环境或者打包的模式
在webpack.config.js文件中：

module.exports = {
  mode: "production",  // 模式默认是 production，就不会出现警告了
  entry: {
    main: "./src/index.js"
  }
}

当mode设置为production的时候，那么打包出的文件就会被压缩，如果mode设置为developent，打包生成的文件不会被压缩。