javascript - Webpack 插件 : How to add dynamically a Module to the main Chunk?

Question

我正在开发一个 Webpack 插件，它基本上在 block 中寻找 css Assets ，当它找到这样的 Assets 时，在其上应用一些返回的 postCSS 插件2 个输出，一个应该继续使用 Extract-Text-Plugin 提取，另一个输出应该成为 chunk 中的一个新模块在运行时将其注入(inject)头部。

我唯一没有设法实现的部分是在现有 block 中创建新模块 的部分。有什么指点/想法吗？

我设法从中创建了一个新 block ，但没有 webpack 包装器，这意味着我无法为那 block css 支持 HMR 并延迟加载它。

class ExtractTPAStylePlugin {
  constructor(options) {
    this._options = Object.assign({
      pattern: [
        /"\w+\([^\)]+\)"/
      ]
    }, options);
  }

  extract(compilation, chunks) {
    const promises = [];

    chunks.forEach((chunk) => {
      promises.push(
        chunk.files
          .filter(fileName => fileName.endsWith('.css'))
          .map(file => postcss([extractStyles(this._options)])
            .process(compilation.assets[file].source(), {from: file, to: file})
            .then((result) => {
              compilation.assets[file] = new RawSource(result.css);

              const filename = file.replace('.css', fileSuffix);
              const newChunk = new Chunk(filename);
              newChunk.files = [filename];
              newChunk.ids = [];
              compilation.chunks.push(newChunk);
              const extractedStyles = `(${addStylesTemplate})()`
                .replace('__CSS__', JSON.stringify(result.extracted))
                .replace('__ID__', file);
              compilation.assets[filename] = new OriginalSource(extractedStyles);
            }))
      );
    });

    return Promise.all(promises);
  }

  apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
      compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
        this.extract(compilation, chunks)
          .then(() => callback())
          .catch(callback);
      });
    });
  }
}

module.exports = ExtractTPAStylePlugin;

Answer 1

好的，所以我设法从几个插件中收集了一些代码，成功的解决方案是将加载器注入(inject)一些伪造的导入文件，在该加载器中将整个 js 代码加载到主包中，然后将optimize-chunk-assets 阶段结果的一些占位符。

之后，在optimize-chunk-assets中，可以找到相关的chunk，使用ReplaceSource查找并替换占位符。

如需灵感，您可以查看 plugin .