Generate manifest.json during build process

[wujekbogdan]

What problem does this feature solve?

I've been working lately on non-SPA, non-Vue app. In order not to write the whole Webpack config on my own I took a great symfony/webpack-encore config. I think there's one thing that Vue CLI could learn from symfony/webpack-encore - it's manifest.json

In webpack-encore the build process generates a manifest.json file that lists all the assets generated during build. Then, the backend code can read the content of the file and enqueue all the assets. It's especially helpful when assets names are hashed.

Example content of the manifest.json file after running yarn serve

{
  "app.css": "http://localhost:8080/app.css",
  "app.js": "http://localhost:8080/app.js",
}

Example content of the manifest.json file after running yarn build

{
  "app.css": "dist/app.9743a66f914cc249efca164485a19c5c.css",
  "app.js": "dist/app.098f6bcd4621d373cade4e832627b4f6.js",
}

What does the proposed API look like?

I'm not sure if manifest.json should be generated by default, but for sure there should be a setting allowing enabling/disabling manifset.json generation.

[LinusBorg]

This can easily be implemented in user land with this plugin: https://www.npmjs.com/package/webpack-assets-manifest

[LinusBorg]

I'm not yet saying that we want this implemented (though its up for discussion).

I'm saying it's easy to implement with one plugin so it can be added to a project without much work - so I'm doubtful we should add it to the core.

Especially since the default usecase of Vue CLI 3 is to use the generated index.html, which doesn't require a manifest for anything.

[wujekbogdan]

This can easily be implemented in user land with this plugin: https://www.npmjs.com/package/webpack-assets-manifest

Thanks. I didn't know that it would be that easy.

Especially since the default usecase of Vue CLI 3 is to use the generated index.html, which doesn't require a manifest for anything.

That's another problem :). I have even created a ticket regarding this "issue" in the past: https://github.com/vuejs/vue-cli/issues/1639

Vue CLI is a great tool, but for newbies (or people who are not so familiar with Webpack) it might be a bit tricky to use Vue CLI for a non-SPA app.

[benzkji]

status of manifest.json is not clear for me, when using @vue/cli-plugin-pwa. A manifest.json is added in the public folder when the plugin is initialized. This file is copied to dist. But never updated. IMO a manifest.json should not be added to the public folder, but generated for each build, respecting configurations from the vue.config.js ?

[tarikhamilton]

Also desired. I'm using Vue CLI to build a WordPress plugin and I need it in the WP environment, so I have to build and update the paths.

@jamesgeorge007 However this is implemented, I think the filename should be changed. manifest.json is already used (see: https://www.w3.org/TR/appmanifest/). create-react-app creates an asset-manifest.json, which I think works. Thanks for working on this

[adamreisnz]

Yes this is quite confusing. I thought I was supposed to put manifest configuration (theme colour etc) into the vue.config.js, but now it stopped generating a manifest.json.

[LinusBorg]

See our Roadmap for v4 (#3649). We will revise this.

[tarikhamilton]

I added my own asset-manifest.json file on my own using the proposed lib.

I can see why this might not be added to vue-cli, as it was pretty easy to implement independently.

const WebpackAssetsManifest = require('webpack-assets-manifest')

module.exports = {
  // ...your other modifications,
  configureWebpack: config => {
    config.plugins = config.plugins.concat(
      new WebpackAssetsManifest({
        output: 'asset-manifest.json'
      })
    )
  }
}

[LinusBorg]

Oh, will have to correct myself - I didn't read carefull yand thought this was about generating manifest.json for a PWA. that's what we will add to the next major.

Generating such an assets list is not on the roadmap right now. probably more something for a cookbook.

[gregveres]

@tarikhamilton I think you meant chainWebpack rather than configureWebpack. My understanding is that configureWebpack lets you define the options that get merged where chainWebpack is a function that gets called with the existing config.

Anyway, my problem is that once I try to require any webpack plugin, I get an error of

 ERROR  TypeError: Cannot read property 'i18n' of undefined
TypeError: Cannot read property 'i18n' of undefined
    at module.exports (...\node_modules\vue-cli-plugin-i18n\index.js:4:49)

I am going to open an issue for it.

[ninest]

I'm not sure how similar these issues are, but a problem I'm currently facing with the Vue PWA plugin is that the icons (favicon, chrome icon, apple touch icon) don't get updated. This is likely because the browser is still serving icons from the cache.

When you create a PWA with the Vue cli, it puts all these icons in the public folder by default. I'm not sure if this is the best idea because then icons won't get the hash in the file name, so their cache won't get busted when they're updated

Here's a link to the issue I created: #5531. The issue is that when I update the icons (favicons, chrome or apple touch icons), they don't get updated