1

I have a webpack build process where the DllPlugin is used to pre-build a list of packages. This allows developers to target specific packages they are actively developing and helps speed up the rebuild process.

How can I configure webpack to exclude "package-abc" from the Dll build, eventhough "package-xyz", which is in the Dll build, depends on it.

I have tried different combinations of configuring webpackConfig.externals and libraryTarget, but no luck so far.

chautelly
  • 447
  • 3
  • 14

1 Answers1

0

I somewhat solved this complicated issue by:

  1. Add the list of packages to be ignored to webpackConfig.externals.
  2. The hot-reloadable build compiles 2 entries. The main app and a named entry for the list of packages that were added to the Dll build's externals.
  3. output.library is set to [name]
  4. This name is also the name externals is referencing
  5. Now the secondary, hot-reloadable build has 2 entries + one or more Dll built assets to be included.
  6. Using a hook provided by the HtmlWebpackPlugin you are able to sort the .js assets injected as script tags.
  7. The script tags should be injected in this order: First the entry containing the "externals", then the Dll scripts, and last the app entry.

At the end of the day I had to abandon this solution because of some spaghetti dependency in my code base. But i did get this to work in a small setup.

For example, if you have package A, B, and C + your main entry (main.js, index.js)

You want to speed up build time by adding everything to a Dll build except package B, the package you are actively developing. However, A imports both B and C and B also imports C. main.js imports A.

Setting up your DllPlugin to include A would automatically include B and C. However, if you add B to the Dll build's list of externals, C ends up in the Dll build, (which is what you want). But now you have a circular dependency.

B in the hot-reloadable secondary entry, depends on the Dll build for C. And the Dll build depends on B. I wrote a script to identify the circular dependency and put C in a separate Dll.

Using a sorting function hooking in to HtmlWebpackPlugin I was able to sort the insertion of script tags ending up with this order:

  • c.js (as a dll)
  • dlls.js (containing A in this case)
  • b.js (hot-reloadable secondary entry)
  • app.js
chautelly
  • 447
  • 3
  • 14