1

I'm working on a multi-entry web app & building with webpack 3, with using extract-text-webpack-plugin to separate entries' css in separate files.

Currently, I'm trying to load some modules dynamically along with their own css to enhance performance, so I used the plugin's allChunks: false option with using the style-loader as a fallback, which works fine when the css file is being required in dynamic modules only, or non-dynamic entry-points only,

I've made a sample project to demonstrate this issue, so let's assume the following entries:

  • entry2: dynamic.css should be part of the extracted css entry2.css --> which works fine
  • entry1: dynamic.css should be part of the dynamically imported chunk dynamic.js, where the contents of dynamic.css will be injected in page with style-loader --> This doesn't work, instead dynamic.css is totally gone

I've already opened an issue on plugin's github repo, but it seems that they are focusing on webpack 4 more than webpack 3, so I'm not expecting they would respond to my issue!

Question is

Is there a workaround to load this shared css dynamically (overcoming this reported issue)?

AbdelHady
  • 9,334
  • 8
  • 56
  • 83
  • Thank you for providing an example. I'll take a look. – nstanard Jan 30 '19 at 17:03
  • What version of node and NPM are you running on? (the webpack command errors out for me - i suspect my versions of node or npm are the cause) couple warnings on install: npm WARN css-loader@2.1.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. npm WARN extractcssissue@1.0.0 No repository field. – nstanard Jan 30 '19 at 17:07
  • the error I get when running webpack from your github repo: webpack (node:60830) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead (node:60830) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead /usr/local/lib/node_modules/webpack/lib/Chunk.js:824 throw new Error( ^ Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead – nstanard Jan 30 '19 at 17:12
  • Thanks for looking it up, I'm using Node V10.0.0, npm V6.5.0 on Ubuntu 16.04 – AbdelHady Jan 30 '19 at 17:38
  • I've forked your example and am playing around with it. Take a look at this instead though: https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry - Pretty sure that's what you are looking for. – nstanard Jan 30 '19 at 17:41
  • @nstanard I know about the `mini-css-extract-plugin`, but it is for webpack4 only, & I'm using webpack3, & upgrading webpack to 4 is not a quick task by any means. Anyway, I do appreciate your efforts. – AbdelHady Jan 30 '19 at 17:45
  • Well, I've made a small change so you can build the project using `npm run build` (which will use the webpack version from `package.json`) instead of running the normal `webpack` build command (which uses the globally installed webpack) – AbdelHady Jan 30 '19 at 17:53
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/187597/discussion-between-nstanard-and-abdelhady). – nstanard Jan 30 '19 at 18:08

0 Answers0