morganney / magic-comments-loader

Add webpack magic comments to your dynamic imports at build time.

👋 Hi, here's some of my interests in technology and software development, in no particular order:

• JavaScript / Node.js / TypeScript
• Web as Platform / Web Development
• Tools and Builds
• Testing / QA
• CI / CD
• Creativity

Read about some of my recent projects to see what else I've been working on, or check out my public repositories.

magic-comments-loader's Issues

multiple import() statements on single line fails

Hi,
thanks for great tool!

I have a small issue with multiple import:s in the same file. The comments are only added to the first import when code is like:

reg( [
                { module: import('@pkg/button'), elem: 'Button' },
                { module: import('@pkg/collapse'), elem: 'Collapse' },
                { module: import('@pkg/icon'), elem: 'Icon' },
] );

The webpackChunkName func is only called once!

A work around is to move imports outside the object init :

const b = import('@pkg/button');
const c = import('@pkg/collapse');
const i = import('@pkg/icon');
reg( [
                { module: b, elem: 'Button' },
                { module: c, elem: 'Collapse' },
                { module: i, elem: 'Icon' },
] );

Now comments are added to all!

Add content hash to chunk name

Thanks for making this excellent tool.

I have a feature request. Would you consider an option that adds a content hash to the chunk name inserted into the webpackChunkName magic comment?

I want to do this because I have this in my webpack config:

output: {
      filename: 'js/[name]_bundle.js',
}
...
loader: "magic-comments-loader",
    options: {
       verbose: true,
       webpackChunkName: {
          config: {
             basename: true,
             //contentHash: true,
          }
       }
    }

And this in my web application
import("../../tt/about_box.html").then(module => { ...

magic-comments-loader automatically inserts
/* webpackChunkName: "about_box" */
for me, but I would like to introduce cache busting.

The easiest way I could think of was to add a content-hash to the chunk name. That is, I would like the loader to read the about_box.html file, generate a truncated MD5 has and add it to the end of the chunk name.

I know I could just add "[contenthash]" to output.filename, but this would change the naming scheme for all assets. I only want to change it for dynamic imports.

I looked at the webpackChunkName options in the loader config but didn't find any option that would allow me to provide a function to generate a custom chunk name during build time.

In the end I modified webpackChunkName.js myself to make a proof of concept.

if (config.contentHash) {
    const fileToImport=dirname(filepath)+"/"+importPath;
    chunkName=chunkName+"_"+sync(fileToImport).substr(0, 8);;
  };

Here sync comes from the md5-file module.

Now it works, and I see this log output at build time:

LOG from ../rohan/magic-comments-loader/src/index.js MCL ../rohan/magic-comments-loader/src/index.js??ruleSet[1].rules[1].use[0]!./node_modules/babel-loader/lib/index.js??ruleSet[1].rules[1].use[1]!./javascripts/app/config_pagesc.js
<i> [MCL] javascripts/app/config_pagesc.js : import(/* webpackChunkName: "about_box_5a4d7295" */ "../../tt/about_box.html")

If you like the idea I can send a PR. For prior art see babel-plugin-add-contenthash-to-imports.

Add capacity to modify current magic comments

Hello,

Thank you for the library!

I've been trying to use it, without success, to alter a third-party library that uses magic comments but it seems that the formatter skips changing/adding current existing comments ( see https://github.com/morganney/magic-comments-loader/blob/main/src/formatter.js#L27 )

Is there a workaround that I've missed?

Thank you!