Webpack Magic Comments?

[rcherny]

Enjoying the concepts behind this plugin and the clarity it brings to the webpack set up and configuration.

Quick question — there's a comment about using the hash to allow multiple chunks with the same names, but relying on the hash (entry-multiple-chunks-same-filename) to get unique file names.

I'm working on a very large site with many components and many "index.scss" files due to how the components are built and styled. We currently use the following pattern to lazy import (I have a separate question about that) CSS files as various routes load:

import /* webpackChunkName: "foo-styles" */ 'Foo/styles/index.scss';

You then get a chunk named that, irregardless of what your chunkFilename settings may be.

We can use the hash name of course, but it strikes me that magic-comments are part of the core webpack feature set and this plugin is breaking with that pattern.

Is there any way to get that to work in the html-bundler-webpack-plugin ?

[webdiscus]

Hello @rcherny,

can you please create a small repo with some dummy components and an example which filenames are expected.
Then I can help you and implement your feature request.

How it works in current version

The plugin has the css.chunkFilename option:

{
  css: {
    filename: '[name].css', // <= filename of CSS defined in link tag
    chunkFilename: '[name].css', // <= filename of CSS imported in JS, the `name` is JS filename
  },
}

Both filename and chunkFilename can be as a function filename: string | ((arg0: PathData, arg1?: AssetInfo) => string),.
So you can define the output filename dynamically using the PathData with source filename with absolute path and a chunk name.

When no hashed name used, then the plugin try to resolve the chunks with the same name adding an index, e.g.: index.css, index.1.css, etc.

Note:

all SCSS/CSS files imported in one JS will be joined into single output CSS file with the name of JS file where these styles was imported.

E.g.
foo.js

import  '@styles/common.scss'; // style from other dir, using webpack alias
import  './index.scss'; // style from the local dir where is the JS

The generated files:

dist/foo.js
dist/foo.css <= here are joined CSS extracted from common.scss and index.scss

[rcherny]

Thank you @webdiscus for the prompt and thorough response. I'll see what I can do about a simple repo example. It may be a day at least heading into the weekend. I appreciate it.

[webdiscus]

@rcherny

Here is additional info how it works with nested components.

In a complex use case, when used many components importing others components (nested components), then all nested imported styles will be joined in one singe CSS file with the name of the root JS file.

For example:

./main.js <= Entry point (root JS)
./component-a.js
...
./style.scss
./component-a1.scss
./component-a2.scss

The entry point (root JS file) ./main.js

import './style.scss'; // import CSS
import A from './component-a.js'; // import nested JS component containing owns styles

The nested child JS file ./component-a.js

import './component-a1.scss'; // import nested CSS
import './component-a2.scss'; // import nested CSS

All CSS content extracted from all nested (child) files will be saved into single file main.css (main is the filename of root JS file):

/* CSS from style.scss */
/* CSS from component-a1.scss */
/* CSS from component-a2.scss */

Note: Split CSS chunks does't work and won't be implemented. Therefore the magic comment webpackChunkName cannot be implemented, it makes so sense.

[rcherny]

With further testing, I have to apologize: I don't believe that the webpackChunkName in CSS files under a child JS webpackChunkName has ever worked. I think it was simply mirroring the chunkFilename in the magic comments for the parent JS chunk.

Please let me know if that aligns with your understanding. I'm glad I didn't try to open a bug ticket on this one 😉

[webdiscus]

@rcherny

Please let me know if that aligns with your understanding.

What do you mean?

How work css.filename and css.chunkFilename options?

For example, there is HTML template where we have the style.scss defined in HTML and main.js containing imported SCSS files:

<html>
<head>
  <title>Home</title>
  <link href="./style.scss" rel="stylesheet">
  <script src="./main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1> <!-- here are CSS from style.scss -->
  <div class="component">My component</div> <!-- here are CSS extracted from component imported in main.js -->
</body>
</html>

main.js

import './component.scss'; // <= the CSS output filename with `css.chunkFilename`

the plugin options:

{
  css: {
    filename: '[name].bundle.css',  // output filename for CSS defined in HTML
    chunkFilename: '[name].chunk.css', // output filename for CSS imported in JS (if not defined, used the `css.filename`)
  },
}

The generated HTML contains CSS output file defined directly in HTML and auto injected CSS extracted from styles imported in JS:

<html>
<head>
  <title>Home</title>
  <link href="style.bundle.css" rel="stylesheet"> <!-- the CSS output filename with `css.filename` -->
  <link href="main.chunk.css" rel="stylesheet"> <!-- the CSS output filename with `css.chunkFilename`, imported in JS -->
  <script src="main.js" defer="defer"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <div class="component">My component</div>
</body>
</html>

[rcherny]

Really appreciate all the follow up on this. I've had a super hectic week and I'm going on vacation this coming week; so I'll follow up more when I return. Thanks again!