webpack 打包生成匹配版本哈希值的 JSON 文件

我就是我 2022-09-13 04:14 154阅读 0赞

## 需求 ##

项目部署需要知道打包生成的静态文件名  
推荐一个生成此 json 文件的插件：[webpack-assets-manifest][]

> *This webpack plugin will generate a JSON file that matches the original filename with the hashed version.*

英文还行的同鞋直接去此 npm 插件地址参阅文档即可，无需浪费笋干。

## 个人配置 ##

webpack 版本：`4.44.2`  
**注意**：webpack4 需要安装对应版本插件，不然会爆炸：

npm install webpack-assets-manifest@4 -D

webpack.config.js:

const path = require('path');
    const WebpackAssetsManifest = require('webpack-assets-manifest');
    
    module.exports = { 
    	entry: { 
    		// Your entry points
    		mobile: path.join(__dirname, './src/main.js')
    	},
        output: { 
           	path: path.join(__dirname, 'dist'),
            filename: "[name]-[hash:8].js",
            chunkFilename: "[id]-[chunkhash].js",
      	},
      	module: { 
        	// Your loader rules go here.
        	
      	},
      	plugins: [
        	new WebpackAssetsManifest({ 
          		// Options go here
        	}),
     	],
    };

最终打包会在 dist 目录下输出类似如下 json 文件：

{ 
      "index.html": "index.html",
      "mobile.css": "mobile-583c0a54.css",
      "mobile.js": "mobile-583c0a54.js",
    }

## 写在最后 ##

做人吃相不要太难看。

[webpack-assets-manifest]: https://www.npmjs.com/package/webpack-assets-manifest

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 C语言计算文件SHA-1哈希值

以下是使用C语言计算文件SHA-1哈希值的示例代码。它使用了SHA-1算法和标准C库函数。 include <stdio.h> include <stdlib

た入场券/ 2024年03月02日 10:50/ 0 赞/ 101 阅读

相关生成、查看文件的MD5、SHA1、SHA2、SHA3值 | 文件的哈希（hash）值生成

文章目录 1. 按 2. 介绍 2.1. MD5 2.2. SHA-1 2.3. SHA-2 2.4.

朴灿烈づ我的快乐病毒、/ 2023年03月14日 08:05/ 0 赞/ 23 阅读

相关哈希值哈希表_哈希杰森

哈希值哈希表我最近写了一个[简单的库，可预测地对json进行哈希处理][json] 。该实用程序基于出色的[Jackson Json解析库][Jackson Json

阳光穿透心脏的1/2处/ 2023年02月25日 04:56/ 0 赞/ 93 阅读

相关 ruby 生成哈希值_Ruby中的哈希

ruby 生成哈希值 [Arrays][] are not the only way to manage collections of variables in [Ruby]

r囧r小猫/ 2022年12月06日 15:47/ 0 赞/ 266 阅读

相关【数据结构】哈希表、哈希值计算分析

哈希表、哈希值计算分析哈希表完整代码引出哈希表哈希表（Hash Table）哈希冲突（Hash Collision） JDK1.8的

清疚/ 2022年11月06日 05:44/ 0 赞/ 268 阅读

相关 Webpack5打包-禁止生成LICENSE文件

问题背景最近将项目中的Webpack3升级到了Webpack5，打包之后发现输出文件中多了一些LICENSE文件，如下图所示： ![6e69a2f18dcc6a97c

超、凢脫俗/ 2022年10月23日 11:17/ 0 赞/ 414 阅读

相关 webpack 打包生成匹配版本哈希值的 JSON 文件

需求项目部署需要知道打包生成的静态文件名推荐一个生成此 json 文件的插件：[webpack-assets-manifest][] > This webpac

我就是我/ 2022年09月13日 04:14/ 0 赞/ 155 阅读

相关哈希值是什么

哈希值是什么哈希值就是文件的身份证，不过比身份证还严格。他是根据文件大小，时间，类型，创作着，机器等计算出来的，很容易就会发生变化，谁也不能预料下一个号码是多少，也没有更改

╰半夏微凉°/ 2022年08月06日 15:29/ 0 赞/ 235 阅读

相关 Win10下查看文件哈希值

1.打开PowerShell（可使用Win10自带搜索功能） 2.输入命令 Get-Filehash -Path"..." -Algorithm ... ...分

梦里梦外;/ 2022年07月12日 01:00/ 0 赞/ 495 阅读

相关 hashCode:哈希值

当用到Java中的集合时，会涉及到HashSet和HashMap，这里拿HashSet举例来说明关于hash的问题。当我们向HashSet集合中存入一个元素时，Ha

谁借莪１个温暖的怀抱￠/ 2022年05月22日 02:28/ 0 赞/ 280 阅读