一、软件介绍

首先，介绍svg-sprite-loader，它是可以集成到webpack的一个loader，作用是合并一组单个的svg图片为一个sprite雪碧图，并把合成好的内容，inject插入到html内，形式是添加svg标签，

svg内部是symbols标签，原理是使用SVG symbols建立图标系统。

二、发现问题

发现svg-sprite-loader有兼容问题，

在webpack配置为node-webkit时，该loader不会自动插入inject 合并好的内容到html内，导致使用svg雪碧图失败，图标不显示。

三、原因分析

通过走查svg-sprite-loader官网和源码发现，其有多种模式，有ssr模式和web模式，我们应该是走了ssr模式，结果不会自动插入dom，只会转为字符串。

https://github.com/JetBrains/svg-sprite-loader

 根据webpack的target不同，执行的js模块也不同。

看下源码：

四、源码分析

首先看入口，是loader.js文件

content，就是给loader传入的参数对象。

this，应该是webpack的compile或者compilation或者webpack实例（应该是它把），反正不管是啥，知道能取到我们传给webpack的配置就行了。

看下，取target配置。

 

参数先被configure方法处理，返回一个config；

 

看下configure所在文件，可以看到，有根据target处理不同的逻辑

 

根据target不同，选择不同的spriteModule;

 

分别看是什么

看下ssr是模块

 

看下web时模块，同样，也是分源码和构建

 

那我们就继续看看这俩文件差异：

先看ssr的，sprite，直接new执行了,但是没插入svg到html

 

再看web下，有插入svg逻辑

举一反三

loader主流程中，何时执行这俩spite模块了？

 

主loader构造函数，有获取runtimeGenerator,运行时生成器逻辑

获取后，干了什么呢？

 

在生成symbol后，调用tuntime生成器函数，返回runtime函数。

那runtime是什么？ 还得从config.js等引入方看起

 

loader,从configurator取，实质从config取，而且，如果开发着自己配置了runtimeGenerator，就优先用开发配置的runtimeGenerator，上面有merge逻辑。

好下面，就看看，源码自带的runtimeGenerator，

获取绝对路径，然后加载立马执行。

然后，放入runtime函数队列，在webpack适当tapable事件响应后，依次执行。

 

五、问题根源

源码没有绿色部分，导致当node-webkit时，走了ssr逻辑，而我们需要的是web逻辑。

从之前代码也可看出来，它支持了electron,但是不支持nw.js

六、提ISSUE

https://github.com/JetBrains/svg-sprite-loader/issues/419

 

七、提PR

先fork下，然后在自己仓库分支改下问题，再提PR，PR合并前，每次自己仓库分支改代码，都会触发githook，源仓库会走ci流程。

https://github.com/JetBrains/svg-sprite-loader/pull/421

 

八、作者发布npm仓库版本

https://www.npmjs.com/package/svg-sprite-loader

九、我们项目升级使用