Is it possible to change chunk filenames?

[insectman]

Question

Is there a way to alter generated chunk filenames? Uploader & Dialog chunks are using relative path, resulting strings contain "node_modules" substring, which causes chunks to be ignored by one of components of my CI pipeline.

[nd0ut]

Hey @insectman,

I didn't catch how does chunk renaming will help you? Technically, you could clone this repo, modify rollup config and bundle your own custom package.

But I think it's better to figure out why your CI is ignoring dynamic imports and fix it.

What bundler do you use on CI? Could you share the config or something that would help me to reproduce the problem?

[insectman]

I didn't catch how does chunk renaming will help you? Technically, you could clone this repo, modify rollup config and bundle your own custom package.

I misworded my question a bit - after bundles are generated, they're deployed with shopify theme kit, which ignores everything, that contains "node_modules" in filename, and there seemingly is no option to disable this ignore rule.

[nd0ut]

after bundles are generated

What tool do you use to generate the bundle?

that contains "node_modules" in filename

I don't quite understand what you mean. The react-widget is an NPM package and it's OK that it placed inside node_modules folder. By filename, do you mean the dynamic import path or the file structure?

So there is a problem with dynamic imports only? And you have no problems with other NPM packages without dynamic imports? I guess your bundler could process them incorrectly, may I take a look on to your generated bundle?

[insectman]

What tool do you use to generate the bundle? webpack. So there is a problem with dynamic imports only? And you have no problems with other NPM packages without dynamic imports? I guess your bundler could process them incorrectly, may I take a look on to your generated bundle? Exactly, the problem is with dynamic imports only. Bundle is in dev mode and contains some sensitive information, but I may attach dynamic imported chunks and webpack config. I haven't encountered similar problems with other NPM packages without dynamic imports. misc.zip

[insectman]

For those, who may encounter the same problem, I was able to resolve it by using following webpack plugin:

const { Compilation, sources } = require('webpack');

const PLUGIN_NAME = 'wp-themekit-issue-fixer-plugin';

class MyPlugin {
  // eslint-disable-next-line class-methods-use-this
  apply(compiler) {
    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
      compilation.hooks.processAssets.tap(
        {
          name: PLUGIN_NAME,
          stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE,
        },
        () => {
          const mainFile = compilation.getAsset('main.js');
          let mainSource = mainFile.source.source();

          const badAssets = compilation
            .getAssets()
            .filter((a) => a.name.match(/node_modules/));
          // console.log(PLUGIN_NAME, { badAssets });
          badAssets.forEach((asset) => {
            const file = compilation.getAsset(asset.name);
            const assetBaseName = asset.name.replace(/\.js$/, '');
            const newAssetBaseName = assetBaseName.replaceAll(
              'node_modules',
              'n_m'
            );
            const newAssetName = asset.name.replaceAll('node_modules', 'n_m');
            mainSource = mainSource.replaceAll(assetBaseName, newAssetBaseName);
            compilation.renameAsset(asset.name, newAssetName);
            compilation.updateAsset(
              newAssetName,
              new sources.RawSource(
                file.source.source().replaceAll(assetBaseName, newAssetBaseName)
              )
            );
          });

          compilation.updateAsset('main.js', new sources.RawSource(mainSource));
        }
      );
    });
  }
}

module.exports = MyPlugin;