Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate manifest.json during build process #3383

Open
wujekbogdan opened this issue Jan 28, 2019 · 11 comments
Open

Generate manifest.json during build process #3383

wujekbogdan opened this issue Jan 28, 2019 · 11 comments

Comments

@wujekbogdan
Copy link

@wujekbogdan wujekbogdan commented Jan 28, 2019

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
Copy link
Member

@LinusBorg LinusBorg commented Jan 28, 2019

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

@LinusBorg
Copy link
Member

@LinusBorg LinusBorg commented Jan 28, 2019

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
Copy link
Author

@wujekbogdan wujekbogdan commented Jan 28, 2019

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: #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
Copy link

@benzkji benzkji commented Feb 19, 2019

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
Copy link

@tarikhamilton tarikhamilton commented Mar 8, 2019

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
Copy link

@adamreisnz adamreisnz commented Mar 28, 2019

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
Copy link
Member

@LinusBorg LinusBorg commented Mar 28, 2019

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

@tarikhamilton
Copy link

@tarikhamilton tarikhamilton commented Mar 29, 2019

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
Copy link
Member

@LinusBorg LinusBorg commented Mar 29, 2019

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
Copy link

@gregveres gregveres commented Apr 22, 2020

@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
Copy link

@ninest ninest commented May 28, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants