Import all dependencies from single webpack bundle/entry automatically

[manstie]

I have webpack-bundle-tracker and django-webpack-loader in a working state after manually fixing them, but as part of my CI/CD it is not viable to do this.

A thing that I noticed this project does not do is link which npm packages are used in which bundles when you follow the tutorial which got me into this in the first place (which you also link in your readme) which makes all the npm packages into different .js files to save bandwidth with caching.

Here's an example of the output of webpack-bundle-tracker@1.0.0-alpha1 (note it does not do this in 0.4.3):

...
"chunks": {
        "globals": [
            "runtime.7389d0ed4f1baaf09d7f.js",
            "globals.cfeb587d501142b196c5.js"
        ],
        "board": [
            "npm.underscore.c7a03d459b7d101c847b.js",
            "npm.regexp.prototype.flags.2623abc18f6e36f1fbd2.js",
            "npm.object-is.38cd874c904b51db50c7.js",
            "npm.object-keys.dfaa60aa949e1df12b1c.js",
            "npm.has-symbols.05e790e10906ba453058.js",
            "npm.function-bind.2d6787cc6f5f48b3b50e.js",
            "npm.es-abstract.6c4cb5b8e3a358d794f8.js",
            "npm.is-regex.4a1384cbccb2368b5c84.js",
            "npm.is-date-object.39cb2bf1968347761930.js",
            "npm.is-arguments.ff60d7ce5200e7f3abb1.js",
            "npm.invert-color.1ed95cd7bb596a2a2a68.js",
            "npm.has.4bac64353b104fe339c3.js",
            "npm.fast-diff.809067b7dc8fbef37c87.js",
            "npm.extend.cf12587c8e830c228315.js",
            "npm.define-properties.a59ce35a4273a902a5e2.js",
            "npm.deep-equal.35ddf946ff5693b1dd89.js",
            "board.5d76531bfc5c8812e276.js"
        ],
        "drive": [
            "npm.quill.0f4eed0169b981e5c8e3.js",
            "npm.quill-cursors.c297e81a0f33e5574f5d.js",
            "npm.quill-delta.ca815e1b8e309922cae6.js",
            "drive.b3ce3a01d399c22a27e2.js"
        ]
    },
...

With the output above, I was able to do {% render_bundle 'board' %} and it would import all the files as seen above under the 'board' chunk.

I believe this is a mandatory feature, as I do not want to be keeping track and/or guessing which npm package I use in which bundle, thus forgetting to add or remove a script tag in my HTML.

I also do not know the significance of the runtime.js file webpack outputs when you have multiple entry files and runtimeChunk: 'single', in your webpack config, but I assume it should be imported when using any of the bundles?

You could even go further as to support webpack's dependOn: 'x', flag, and have the bundles that depend on other bundles automatically imported also, which is something the older project does not do.

With all that in mind, it should probably prevent importing the same file twice in one document?

Thanks for creating and maintaining this project. Please let me know if this feature is possible for you to implement.

[rykener]

Hi @manstie, I'm not understanding what exactly you want to do. If you're using this app, django-manifest-loader, you can import all files with a single tag, where the first argument is the pattern to match, and the second argument is what string to embed the matched file path into:

{% load manifest %}
{% manifest_match '*.js' '<script src="{match}"/>' %}

Please not that this app is not designed to work with webpack-bundle-tracker. django-webpack-loader is a different app from this one, which is designed to work with webpack-bundle-tracker.

This app uses webpack-manifest-plugin

[manstie]

The point is I do not want to import every file on one page because I have created multiple bundles/apps, and my webpack config has multiple entry-points.

So for this feature to work, the output of webpack-manifest-plugin would have to have an option, and webpack-manifest-loader would have to have a function to allow for specific bundle (and its dependencies) importing only.

I understand the difference between the two sets of applications, and I was trying to explain the feature of the old unmaintained repos.

[rykener]

Okay. I think I see what you're saying. I'll admit that it's been several years since I used django-webpack-loader, and I wrote this app instead of having to learn it again. I'm working on a pull request (#22) right now that allows the implementation of custom loaders. I'm pretty sure a custom loader could be used to do what you want to do. Once I finish that PR I might look into building a loader for this to help people transition from one app to the other.

[manstie]

Sounds good, thanks for working on that.

[rykener]

@manstie the custom loaders have been released and are available in the latest version of this package. You can build a custom loader that will allow you to parse through the manifest file as you choose. This should let you implement compatibility for the manifest file generated by webpack-bundle-tracker.

Documentation on how to build a custom loader can be found here: https://django-manifest-loader.readthedocs.io/en/stable/docs/usage.html#custom-loaders

Seeing how webpack-bundle-tracker is no longer maintained I will not be implementing a loader for it into the source code of this package. If you do build a loader I encourage you to share the source code of it here so that others in the future may be able to find it.

[rykener]

PS this draft of a loader I built for create react app is pretty close to what you'd want to implement for this: https://github.com/shonin/django-manifest-loader/pull/33/files#diff-52d43aa2f47a3b5faa105d50717c0277a2af1a9dc404e43860e3d42719b5f051R29

[manstie]

Nice work.