search

nystudio107 / annotated-webpack-config

This is the companion github repo for the "An Annotated webpack 4 Config for Frontend Web Development" article.
https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development
MIT License
436 stars 75 forks source link

manifest.json does not contain styles #6

Closed nternetinspired closed 5 years ago

nternetinspired commented 5 years ago

Hey Andrew,

Possibly an issue with my understanding here but I was expecting manifest.json to link to compiled styles, as it does with app.js. I believe this is why Twigpack may not be updating styles for me in dev (it is loading the file hashes seen in manifest-legacy.json instead), as they are not linked to in the manifest.

Steps to reproduce:

  1. Clone repo,
  2. yarn,
  3. yarn build,
  4. View manifest.json

For me this file contains only:

{
  "vendors~confetti~vue.js": "/dist/js/vendors~confetti~vue.b3ee5c6bd57567fd1554.js",
  "vendors~confetti~vue.js.map": "/dist/js/vendors~confetti~vue.b3ee5c6bd57567fd1554.js.map",
  "app.js": "/dist/js/app.ab10e7ef725aa5b4ef63.js",
  "app.js.map": "/dist/js/app.ab10e7ef725aa5b4ef63.js.map",
  "confetti.js": "/dist/js/confetti.45dcc9e48cccbf244297.js",
  "confetti.js.map": "/dist/js/confetti.45dcc9e48cccbf244297.js.map",
  "../sw.js": "/dist/../sw.js",
  "js/precache-manifest.js": "/dist/js/precache-manifest.ce741f64cc80d2bdc9a10f37ffbb0859.js"
}

Compared to manifest-legacy.json:

{
  "styles.css": "/dist/css/styles.0da40f7d31e778f4181a.css",
  "styles.js": "/dist/js/styles-legacy.0da40f7d31e778f4181a.js",
  "styles.js.map": "/dist/js/styles-legacy.0da40f7d31e778f4181a.js.map",
  "vendors~confetti~vue.js": "/dist/js/vendors~confetti~vue-legacy.8391b437b7a12a4b13d4.js",
  "vendors~confetti~vue.js.map": "/dist/js/vendors~confetti~vue-legacy.8391b437b7a12a4b13d4.js.map",
  "app.js": "/dist/js/app-legacy.95d36ead9190c0571578.js",
  "app.js.map": "/dist/js/app-legacy.95d36ead9190c0571578.js.map",
  "confetti.js": "/dist/js/confetti-legacy.8e9093b414ea8aed46e5.js",
  "confetti.js.map": "/dist/js/confetti-legacy.8e9093b414ea8aed46e5.js.map",
  "css/styles.0da40f7d31e778f4181a.css.map": "/dist/css/styles.0da40f7d31e778f4181a.css.map",
  "img/favicons/android-chrome-144x144.png": "/dist/img/favicons/android-chrome-144x144.png",
  "img/favicons/android-chrome-192x192.png": "/dist/img/favicons/android-chrome-192x192.png",
  "img/favicons/android-chrome-256x256.png": "/dist/img/favicons/android-chrome-256x256.png",
  "img/favicons/android-chrome-36x36.png": "/dist/img/favicons/android-chrome-36x36.png",
  "img/favicons/android-chrome-384x384.png": "/dist/img/favicons/android-chrome-384x384.png",
  "img/favicons/android-chrome-48x48.png": "/dist/img/favicons/android-chrome-48x48.png",
  "img/favicons/android-chrome-512x512.png": "/dist/img/favicons/android-chrome-512x512.png",
  "img/favicons/android-chrome-72x72.png": "/dist/img/favicons/android-chrome-72x72.png",
  "img/favicons/android-chrome-96x96.png": "/dist/img/favicons/android-chrome-96x96.png",
  "img/favicons/apple-touch-icon-114x114.png": "/dist/img/favicons/apple-touch-icon-114x114.png",
  "img/favicons/apple-touch-icon-120x120.png": "/dist/img/favicons/apple-touch-icon-120x120.png",
  "img/favicons/apple-touch-icon-144x144.png": "/dist/img/favicons/apple-touch-icon-144x144.png",
  "img/favicons/apple-touch-icon-152x152.png": "/dist/img/favicons/apple-touch-icon-152x152.png",
  "img/favicons/apple-touch-icon-167x167.png": "/dist/img/favicons/apple-touch-icon-167x167.png",
  "img/favicons/apple-touch-icon-180x180.png": "/dist/img/favicons/apple-touch-icon-180x180.png",
  "img/favicons/apple-touch-icon-57x57.png": "/dist/img/favicons/apple-touch-icon-57x57.png",
  "img/favicons/apple-touch-icon-60x60.png": "/dist/img/favicons/apple-touch-icon-60x60.png",
  "img/favicons/apple-touch-icon-72x72.png": "/dist/img/favicons/apple-touch-icon-72x72.png",
  "img/favicons/apple-touch-icon-76x76.png": "/dist/img/favicons/apple-touch-icon-76x76.png",
  "img/favicons/apple-touch-icon-precomposed.png": "/dist/img/favicons/apple-touch-icon-precomposed.png",
  "img/favicons/apple-touch-icon.png": "/dist/img/favicons/apple-touch-icon.png",
  "img/favicons/apple-touch-startup-image-1182x2208.png": "/dist/img/favicons/apple-touch-startup-image-1182x2208.png",
  "img/favicons/apple-touch-startup-image-1242x2148.png": "/dist/img/favicons/apple-touch-startup-image-1242x2148.png",
  "img/favicons/apple-touch-startup-image-1496x2048.png": "/dist/img/favicons/apple-touch-startup-image-1496x2048.png",
  "img/favicons/apple-touch-startup-image-1536x2008.png": "/dist/img/favicons/apple-touch-startup-image-1536x2008.png",
  "img/favicons/apple-touch-startup-image-320x460.png": "/dist/img/favicons/apple-touch-startup-image-320x460.png",
  "img/favicons/apple-touch-startup-image-640x1096.png": "/dist/img/favicons/apple-touch-startup-image-640x1096.png",
  "img/favicons/apple-touch-startup-image-640x920.png": "/dist/img/favicons/apple-touch-startup-image-640x920.png",
  "img/favicons/apple-touch-startup-image-748x1024.png": "/dist/img/favicons/apple-touch-startup-image-748x1024.png",
  "img/favicons/apple-touch-startup-image-750x1294.png": "/dist/img/favicons/apple-touch-startup-image-750x1294.png",
  "img/favicons/apple-touch-startup-image-768x1004.png": "/dist/img/favicons/apple-touch-startup-image-768x1004.png",
  "img/favicons/browserconfig.xml": "/dist/img/favicons/browserconfig.xml",
  "img/favicons/coast-228x228.png": "/dist/img/favicons/coast-228x228.png",
  "img/favicons/favicon-16x16.png": "/dist/img/favicons/favicon-16x16.png",
  "img/favicons/favicon-32x32.png": "/dist/img/favicons/favicon-32x32.png",
  "img/favicons/favicon.ico": "/dist/img/favicons/favicon.ico",
  "img/favicons/firefox_app_128x128.png": "/dist/img/favicons/firefox_app_128x128.png",
  "img/favicons/firefox_app_512x512.png": "/dist/img/favicons/firefox_app_512x512.png",
  "img/favicons/firefox_app_60x60.png": "/dist/img/favicons/firefox_app_60x60.png",
  "img/favicons/manifest.json": "/dist/img/favicons/manifest.json",
  "img/favicons/manifest.webapp": "/dist/img/favicons/manifest.webapp",
  "img/favicons/mstile-144x144.png": "/dist/img/favicons/mstile-144x144.png",
  "img/favicons/mstile-150x150.png": "/dist/img/favicons/mstile-150x150.png",
  "img/favicons/mstile-310x150.png": "/dist/img/favicons/mstile-310x150.png",
  "img/favicons/mstile-310x310.png": "/dist/img/favicons/mstile-310x310.png",
  "img/favicons/mstile-70x70.png": "/dist/img/favicons/mstile-70x70.png",
  "img/favicons/yandex-browser-50x50.png": "/dist/img/favicons/yandex-browser-50x50.png",
  "img/favicons/yandex-browser-manifest.json": "/dist/img/favicons/yandex-browser-manifest.json",
  "js/analytics.js": "/dist/js/analytics.2288a7f0b8dafb9384355f3cd86c0e83.js",
  "js/workbox-catch-handler.js": "/dist/js/workbox-catch-handler.js",
  "webapp.html": "/dist/webapp.html"
}

Is this behaviour expected? Any light you can shed would be much appreciated. TIA.

TomDeSmet commented 5 years ago

I have the same issue. I added the second parameter (true) to load my CSS asynchronously and than my CSS did load in development. {{ craft.twigpack.includeCssModule("style.css", true) }}

However, it's still not in my production manifest.

khalwat commented 5 years ago

There will be no styles.css in your webserver-dev-builds -- this is because the CSS is auto-inserted into the DOM via the css-loader

For the actual production build, the styles.css will be in the manifest-legacy.json as discussed in the article.

The reason for this is for it to be in both the modern manifest.json as well as the manifest-legacy.json would require rebuilding it twice; which would be slow, and relatively pointless.

I opted to do the build one, and put the results in the manifest-legacy.json because we are compiling more modern CSS down to a legacy CSS (processed by PostCSS) that works on any browser.

If we ever reached the day where we had something akin to JavaScript ES6 Modules for CSS, then it might make sense to have a modern/legacy CSS bundle.

I suppose you could argue that we could do that now with the browserslist but the gains seemed relatively small, and there's no neat correlation I can find to determine which CSS we should be loading for a given browser. There's no <style type="module"> or such to help us do it neatly, there way there is of JavaScript.