webpack_(第二章)_浅析webpack打包输出的内容

浅谈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,打包生成的文件不会被压缩。

发布了137 篇原创文章 · 获赞 30 · 访问量 26万+

猜你喜欢

转载自blog.csdn.net/hani_wen/article/details/93088731