Webpack插件：如何向主Chunk中动态添加模块？

Great question! Adding a new module to an existing chunk in a Webpack plugin means working directly with Webpack's core compilation object and its internal APIs. Here's a practical, step-by-step breakdown to solve this:

1. Tap into the right compilation hook #

You need to modify chunks before Webpack "seals" them (once sealed, chunks can’t be altered). The best hook for this is compilation.hooks.beforeSeal—it runs after initial module building but before chunks are finalized. For Webpack 5, you could also use compilation.hooks.processAssets with the PROCESS_ASSETS_STAGE_ADDITIONS stage, but beforeSeal is more reliable for modifying chunk contents directly.

2. Create a runtime injection module #

Once you have your PostCSS-processed CSS string (the one meant for runtime injection), wrap it in a small JavaScript module that will inject the styles into the page when executed. For example:

const injectedCss = `/* Your processed CSS here */`;
const styleTag = document.createElement('style');
styleTag.textContent = injectedCss;
document.head.appendChild(styleTag);
export default styleTag;

To turn this into a valid Webpack module, use NormalModule—Webpack’s core module type. You’ll need a unique resource identifier (to avoid conflicts) and the raw module source.

3. Add the module to the compilation and link it to your chunk #

Once the module is defined, you need to:

• Register it with the compilation so Webpack processes it
• Connect it to your target chunk so it’s included in the chunk’s output

Here’s a concrete code example for your plugin:

const { NormalModule } = require('webpack');
const { RawSource } = require('webpack-sources');

// Inside your plugin's apply method
compiler.hooks.compilation.tap('CssInjectPlugin', (compilation) => {
  compilation.hooks.beforeSeal.tapPromise('CssInjectPlugin', async () => {
    // Loop through all chunks to find those with CSS resources
    for (const chunk of compilation.chunks) {
      // Replace this with your logic to extract and process CSS from the chunk
      const processedCssForInject = getProcessedInjectCss(chunk);
      if (!processedCssForInject) continue;

      // Escape special characters in CSS to safely embed in JS template
      const escapedCss = processedCssForInject.replace(/`/g, '\\`');

      // Build the injection module content
      const moduleContent = `
        const injectedCss = \`${escapedCss}\`;
        const styleTag = document.createElement('style');
        styleTag.textContent = injectedCss;
        document.head.appendChild(styleTag);
        export default styleTag;
      `;

      // Create a unique resource path to avoid caching conflicts
      const resourcePath = `webpack-inject-css:/inject-${chunk.id || chunk.name}.css.js`;

      // Initialize the NormalModule
      const injectModule = new NormalModule({
        resource: resourcePath,
        loaders: [], // No loaders needed—this is raw JS
        type: 'javascript/auto',
      });

      // Add the module to the compilation
      const moduleResult = await compilation.addModule(injectModule);
      if (moduleResult.error) {
        compilation.errors.push(moduleResult.error);
        continue;
      }

      // Build the module so Webpack processes it
      await injectModule.build(
        compiler.options,
        compilation,
        compiler.resolverFactory.get('normal'),
        compiler.inputFileSystem,
        () => {}
      );

      // Link the module to your target chunk
      // For Webpack 4, use chunk.addModule(injectModule) instead
      compilation.chunkGraph.connectChunkAndModule(chunk, injectModule);
    }
  });
});

4. Critical considerations #

• Webpack version differences: For Webpack 4, replace compilation.chunkGraph.connectChunkAndModule(chunk, injectModule) with chunk.addModule(injectModule).
• CSS escaping: Always escape backticks and special characters in your processed CSS (the example uses replace(//g, '\')—adjust for other characters if needed).
• ExtractTextPlugin compatibility: Ensure you’re copying the CSS resource for injection—don’t modify the original module that ExtractTextPlugin processes.
• Caching: Use the chunk’s ID or name in the module’s resource path to avoid caching issues across builds.
• Error handling: Catch and report errors during module creation/building to avoid silent failures in your plugin.

内容的提问来源于stack exchange，提问作者felixmosh