如何在webpack4 manifest.json中为*所有* .js、.css和.png资产设置密钥前缀？
如何在webpack4 manifest.json中为*所有* .js、.css和.png资产设置密钥前缀？
提问于 2018-09-03 02:03:15
我开始和Webpack在一起了
我安装了webpack@4.17.1
我得到了它生成汇编的js和css文件，并移动img文件。
当我跑着跑时，我得到了
pub/bld/
├── css
│ └── common.css
├── img
│ └── image.jpg
└── js
└── common.js现在我想生成一个manifest.json
我安装了webpack-清单-插件@2.0.3
我配置了
const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = () => ({
plugins: [
new ManifestPlugin({
fileName: 'manifest.json',
})
]
});现在，当我运行webpack时，添加了manifest.json
pub/bld/
├── css
│ └── common.css
├── img
│ └── image.jpg
├── js
│ ├── runtime_manifest.js
│ └── common.js
└── manifest.json对于这些文件，将生成此manifest.json
{
"common.css": "css/common.css",
"common.js": "js/common.js",
"runtime_manifest.js": "js/runtime_manifest.js",
"img/image.jpg": "img/image.jpg",
}我不明白为什么'*.img‘文件的manifest键有"img/“前缀，而'*.js’和'*.css‘键没有。
我想要得到一致的结果，比如
{
"css/common.css": "css/common.css",
"js/common.js": "js/main.js",
"js/runtime_manifest.js": "js/runtime_manifest.js",
"img/image.jpg": "img/image.jpg",
}我猜它需要不同的配置。
还不确定如何做到这一点。
我需要在配置中添加或更改哪些内容？
感谢您的帮助！
EDIT1：
git clone https://github.com/atown2/wt1
cd wt1
yarn install
rm -rf pub/bld
yarn run w-d
cat pub/bld/manifest.json
{
"common.css": "bld/css/common.css",
"common.js": "bld/js/common.js",
"runtime_manifest.js": "bld/js/runtime_manifest.js",
"vendor.js": "bld/js/vendor.js",
"img/image.jpg": "bld/img/image.jpg"
}
rm -rf pub/bld
yarn run w-p
cat pub/bld/manifest.json
{
"common.css": "bld/css/common.29a2491a64f9fa0bb242.css",
"common.js": "bld/js/common.06c02ae762fab74de1c2.js",
"vendor.js": "bld/js/vendor.f8169ef54a3835cf9193.js",
"runtime_manifest.js": "bld/js/runtime_manifest.f4c47723a9293e3db34d.js",
"img/image.jpg": "bld/img/image.e910e1baeaab6869d39e369296aad8f5.jpg"
}回答 1
Stack Overflow用户
发布于 2018-09-17 01:07:02
问题是清单插件是根据条目来选择名称的。要进行调整，请实现map
exports.Manifest = () => ({
plugins: [
new WebpackManifest({
fileName: 'manifest.json',
filter: (file) => !file.path.match(/\.map$/),
map: (file) => {
const extension = path.extname(file.name).slice(1)
return {
...file,
name: ['css', 'js'].includes(extension) ?
`${extension}/${file.name}` :
file.name
}
}
})
]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52139737
复制相关文章
相似问题