How to set key prefixes in webpack4 manifest.json for ALL .js, .css & .png assets?

Question

I'm getting started with Webpack

I installed webpack@4.17.1

I got it generating assembled js & css files, and moving img files

When I run webpack I get

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

Now I want to generate a manifest.json

I installed webpack-manifest-plugin@2.0.3

I configured

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

Now, when I run webpack, the manifest.json is added

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

For those files this manifest.json is generated

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

I don't get why the '*.img' file's manifest key has the "img/" prefix but the '*.js' & '*.css' keys don't.

I want to end up with something consistent like

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

I guess it needs different config.

Not sure how to do that yet.

What do I need to add or change in my config?

Appreciate any help!

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

Did you try https://www.npmjs.com/package/webpack-manifest-plugin#optionsmap ? I think you should have the needed access there to rewrite the manifest. — Juho Vepsäläinen, Sep 15 '18 at 11:43
Don't know what to do with that. Are there any examples of it? It's strange that you need to 'map' anything just to get the plugin to have different assets get the same type of prefix path. — allentown, Sep 16 '18 at 12:20
Ok, added an example. Likely you have to adjust from there to match the exact result you want. — Juho Vepsäläinen, Sep 16 '18 at 17:07

score 3 · Answer 1 · answered Sep 16 '18 at 17:07

The problem is that the manifest plugin picks the names based on entry. To adjust, implement a 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
        }
      }
    })
  ]
});

How to set key prefixes in webpack4 manifest.json for *ALL* .js, .css & .png assets?

1 Answers1

How to set key prefixes in webpack4 manifest.json for ALL .js, .css & .png assets?