Webpack输出配置中哈希占位符后的:8有什么含义？

你猜测的和UTF-8相关的结论是错的，这个写法和字符编码没有任何关系，是Webpack文件名占位符自带的长度截取语法。

基础规则说明 #

Webpack在配置output.filename、output.chunkFilename等输出文件名规则时，支持用[占位符名]的格式动态拼接文件名内容，你看到的几个常见hash类占位符含义如下：

• [name]：对应入口配置的chunk名称，比如你配置了入口main: './src/index.js'，这里就会替换成main
• [fullhash]：Webpack每次编译生成的全局构建hash，只要项目里任意一个文件的内容发生变化，重新构建时这个hash值就会全部更新，老版本Webpack里这个占位符叫[hash]
• [contenthash]：基于单个输出文件本身内容生成的hash，只有当前文件的内容发生改动时，对应文件的这个hash值才会变化，是生产环境做静态资源缓存优化的首选占位符

:8后缀的具体作用 #

Webpack默认生成的hash值是20位的十六进制字符串，直接拼在文件名里会导致文件名过长。占位符后面加:<正整数>的写法，就是用来指定该占位符替换到文件名里时，截取前多少位的内容。
比如你配置里写的[fullhash:8]，就是取本次构建生成的fullhash值的前8位拼接进文件名：如果本次构建的fullhash是3f78b21a9c4e6d02f5ac，最终生成的文件名就会是类似main3f78b21a.bundle.js的形式。

配置优化提示 #

生产环境不推荐你贴的配置里用[fullhash:8]的写法：只要项目里任意一个小文件改动，所有输出资源的文件名都会变化，导致用户浏览器之前缓存的所有资源都失效，浪费带宽也拖慢加载速度。换成[contenthash:8]会更合理，8位长度的hash已经足够避免文件重名冲突，同时只有内容改动的文件才会更新文件名，能最大化利用浏览器缓存。

内容的提问来源于stack exchange，提问作者Justin Meskan