javascript - 如何将文件附加到 Webpack 中的 bundle ，或注入(inject)所需的代码？

Question

我正在尝试构建一个将模块/文件注入(inject)客户端包的插件。

入口配置可能如下所示:

entry: {
  'main': [
    'some-stuff'
  ],
}

我想像这样使用我的插件:

function SomePlugin(options) {
    this.entryToAppendTo = options.entryToAppendTo
}

...

plugins: [
  new SomePlugin({ entryToAppendTo: 'main' })
]

在我的插件中，我想像在 Webpack 本身中完成一样要求该文件，例如:

SomePlugin.prototype.apply = function(compiler) {

    compiler.plugin( 'emit', function( compilation, callback ) {

        var additionalModule = 'my-module?some-stuff=' + Date.now();
        // how to add this to the specified entry?

    })

});

请注意，我正在传递一个动态查询字符串，这就是我打算在插件中执行此操作的原因。

我想将一个文件附加到包中，或者以某种方式将其注入(inject)到客户端包中。我试过将它添加到 compilation.assets as shown here但它不会进入实际的 bundle 。我还尝试添加子编译器 as demonstrated in this question但同样的问题。

Answer 1

这听起来与我在这里尝试做的类似(成功率有限):Webpack plugin: how can I modify and re-parse a module after compilation?

仅仅将一个模块插入到你的包中的问题是，即使你把它放进去，webpack 中的一个编译模块是一个被捆绑源的其他部分调用的函数——所以除非其他部分捆绑的源代码是 require 您插入的 bundle ，它不会被执行。

你能用一个自定义加载器来解决这个问题，该加载器有策略地为你想要包含的模块插入一个 require 吗？