webpack内联插件与HarmonyImportSpecifierDependency冲突如何解决

你的冲突本质是你和内置插件HarmonyImportSpecifierDependency都基于原始源码的AST位置生成替换逻辑，两个修改叠加后出现位置偏移，导致生成无效代码，可以通过以下三种方式解决：

方案1：优先用自定义loader做源码转译（最稳妥） #

webpack的loader执行时机早于webpack内部parser解析，你可以实现一个自定义loader先处理目标代码：

• 匹配到你要内联的导入语句时，直接删除导入声明
• 同时把所有对应导入函数的CallExpression替换为目标MemberExpression
• 转译后的代码再交给webpack处理，此时内置插件根本不会识别到已经被删掉的导入，自然不会生成额外的替换逻辑

方案2：阻止内置插件处理你要内联的导入 #

在你监听的parser.hooks.importSpecifier钩子中，当匹配到你需要内联的导入时，直接返回false，即可阻断webpack默认的HarmonyImportSpecifierDependency收集逻辑，内置插件不会对该导入做任何处理，只有你的替换逻辑生效，不会出现重叠修改。

方案3：手动移除内置依赖调整优先级 #

如果不想修改现有逻辑，可以在compilation.hooks.finishModules钩子中遍历目标模块的dependencies数组，找到对应你要内联的导入的HarmonyImportSpecifierDependency实例，直接从数组中删除该依赖，即可避免内置插件的替换逻辑执行。

你之前在compilation阶段重新解析模块不生效，是因为默认webpack已经完成了依赖收集，你需要主动调用compilation.rebuildModule方法触发模块重新构建，并且确保你修改后的代码在解析前已经注入，才能让内置插件基于新代码处理。

内容的提问来源于stack exchange，提问作者re-gor