需求
项目部署需要知道打包生成的静态文件名
推荐一个生成此 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",
}
写在最后
做人吃相不要太难看。