相关疑难解决方法(0)

我正在开发一个webpack插件,无法弄清楚如何在构建期间修改模块.我正在做的事情:

• 通过自定义加载器收集数据(精细)
• 加载完所有模块后,收集我的加载器收集的数据(罚款)
• 将我生成的代码插入到构建中的现有模块中(按照下面的描述执行此操作,不确定它是否是最佳方法)
• "更新"该模块,以便我添加的代码得到解析并将其'require'变为webpack require调用(无法弄清楚如何正确执行此操作)

目前我正在编译器上进行'this-compilation',然后在编译中加入'additional-chunk-assets'.抓住第一个块(目前唯一的一个,因为我还在开发中),遍历该块中的模块以找到我想要修改的块.然后:

• 将生成的源附加到模块的_cachedSource.source._source._value(我也尝试附加到模块的._source._value)
• 将._cachedSource.hash设置为空字符串(因为这似乎是下一步工作所必需的)
• 我将模块传递给.rebuildModule()

看起来rebuildModule应该重新解析源代码,重新建立依赖关系等等,但它不会解析我的require语句并将它们更改为webpack需要.构建的文件包含我修改的源,但require('...')语句未经修改.

如何使我修改的模块"更新",以便webpack将处理我添加的源与原始解析的源相同？除了rebuildModule()之外我还需要做些什么吗？我在构建过程中做得太晚了吗？或者我是以错误的方式去做的？

我正在编写一个创建SVG精灵的插件.它遍布目录,在一个图像中合并SVG文件并返回结果.我们的想法是动态创建一个模块(包含合并的图像),以便其他模块可以将其作为常用模块.或者您可以建议更优雅的解决方案？

配置

{
  plugins: [
    new SvgSpritePlugin({
      sprites: {
        icons: 'images/svg/icons/*.svg',
        logos: 'images/svg/logos/*.svg',
        socials: 'images/svg/logos/{twitter,youtube,facebook}.svg',
      }
    })
  ]
}

在应用程序的某个地方

var logosSprite = require('sprite/logos'); // require dynamically created module
document.body.appendChild(logoSprite);