webpack_（第二章）_浅析webpack打包输出的内容

心已赠人 2022-01-09 20:51 380阅读 0赞

浅谈webpack打包知识点  
在上次完成webpack基本配置之后  
运行`npm run bundle` 打包  
可以看到在我们打包的时候，输出了非常多的提示命令，那输出的这些信息是什么意思呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
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的简写  
![在这里插入图片描述][20190621110103547.png]  
![在这里插入图片描述][20190621110149467.png]  
所以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，打包生成的文件不会被压缩。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220109/15e25d727e9e4fe4b49d77023bf7561a.png
[20190621110103547.png]: /images/20220109/f15780aa04724035993fa5b276029e35.png
[20190621110149467.png]: /images/20220109/a9b493e2cb054376a3fc11933662fd19.png