如何在*全部* .js，.css和.png资产的webpack4 manifest.json中设置键前缀？

Question

我开始使用Webpack

我安装了webpack@4.17.1

我得到了它来生成汇编的js和css文件，并移动img文件

运行webpack时我得到

<add name="MyDb_SQLite" providerName="System.Data.SQLite.EF6" connectionString="Data Source =|DataDirectory|MyDb.sqlite" />

现在我要生成一个manifest.json

我安装了webpack-manifest-plugin@2.0.3

我已配置

pub/bld/
├── css
│   └── common.css
├── img
│   └── image.jpg
└── js
    └── common.js

现在，当我运行webpack时，将添加manifest.json

const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = () => ({
    plugins: [
        new ManifestPlugin({
            fileName: 'manifest.json',
        })
    ]
});

对于这些文件，此manifest.json会生成

pub/bld/
├── css
│   └── common.css
├── img
│   └── image.jpg
├── js
│   ├── runtime_manifest.js
│   └── common.js
└── manifest.json

我不明白为什么“ * .img”文件的清单密钥具有“ img /”前缀 但是'* .js'和'* .css'键却没有。

我想最终得到类似的东西

{
  "common.css": "css/common.css",
  "common.js":  "js/common.js",
  "runtime_manifest.js": "js/runtime_manifest.js",
  "img/image.jpg": "img/image.jpg",
}

我想它需要不同的配置。

尚不确定该怎么做。

我需要在配置中添加或更改什么？

感谢任何帮助！

EDIT1：

{
  "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",
}

Answer 1

问题在于清单插件会根据条目选择名称。要进行调整，请实施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
        }
      }
    })
  ]
});