如何在webpack4 manifest.json中为*ALL*.js、.css&;设置键前缀。png资产?
我正在开始使用Webpack 我安装了webpack@4.17.1 我让它生成组合的js和css文件,并移动img文件 当我运行webpack时,我得到如何在webpack4 manifest.json中为*ALL*.js、.css&;设置键前缀。png资产?,webpack,manifest,webpack-4,manifest.json,survivejs,Webpack,Manifest,Webpack 4,Manifest.json,Survivejs,我正在开始使用Webpack 我安装了webpack@4.17.1 我让它生成组合的js和css文件,并移动img文件 当我运行webpack时,我得到 pub/bld/ ├── css │ └── common.css ├── img │ └── image.jpg └── js └── common.js 现在我想生成manifest.json 我安装了网页包清单-plugin@2.0.3 我配置了 const ManifestPlugin = require('webpa
pub/bld/
├── css
│ └── common.css
├── img
│ └── image.jpg
└── js
└── common.js
现在我想生成manifest.json
我安装了网页包清单-plugin@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'文件的清单键有“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",
}
我想它需要不同的配置
还不知道怎么做
我需要在配置中添加或更改什么
谢谢你的帮助
编辑1:
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"
}
问题是清单插件根据条目选择名称。要进行调整,请执行
映射
:
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
}
}
})
]
});
你能安排一个小项目看看吗?谢谢。@JuhoVepsäläinen将信息添加到上面的“EDIT1”中。您尝试过吗?我想你应该有必要的权限重写清单,我不知道该怎么办。有这样的例子吗?奇怪的是,你需要“映射”任何东西,只是为了让插件有不同的资源,得到相同类型的前缀路径。很可能您必须从那里调整以匹配您想要的确切结果。