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

需求

项目部署需要知道打包生成的静态文件名
推荐一个生成此 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",
}

写在最后

做人吃相不要太难看。