Menu
Situation
I'm trying to load a library with Webpack. The library itself has been split up using Webpack into multiple chunks.
Project A has a dependency on project B. Project B has been built with Webpack and consists of multiple chunks. Project A now loads project B through a dynamic import. When project A is built, I would like the chunks of project B to be created in the output folder of project A.
Question
How do I get the chunks of project B to persist as chunks in the final build of the project?
Example
I made an example project (https://github.com/Robinfr/chunky-webpack) that has two levels of sub-packages. Both sub-package-a and b create chunks but they are all usurped into a single main-bundle.js when building the main-package.
629
Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child).
chunk. js files are for third-party libraries like the react , axios , and formik library code that is imported to the application. Code splitting technique will also create a chunk. js file, so you need to check the file and see if the chunk is for node_modules code or your application code. There's also one chunk.
Webpack injects some code into main. js which takes care of lazy loading async chunks and stops from loading same chunks again and again. When a route changes, React router calls a Webpack function to load a chunk file and Webpack after done loading runs it, which chunk then would internally ask React to do something.
Naming your Webpack chunks helps you understand the contents of each bundle of code, and keep consistency between deploys. In this post, we look at named outputs, including dynamic imports, split chunks, and common chunks. I recently wrote about code splitting with Webpack and using the SplitChunksPlugin.
After some experimentation, I figured out that just using the source files as is and only compiling in the final product is one of the ways to go. This way Webpack can generate the chunks for all of the packages.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
