解决vue-cli中webpack无法打包js变量中的图片路径

首先，我们先来重现一下问题，如果直接通过路径的形式引入一个图片，例如：

假设在src的asstes目录下有一个叫demo的图片（且假设这个图片比较大，不会被base64压缩），在这种情况下，图片是可以正常显示的。但是有些时候，我们需要以js变量的形式引入一个图片的路径，此时，问题就来了。

程序运行的效果如下图所示：

可以看到，明明路径是一样的，可是就是显示不出图片，我通过Segmentfault查阅资料，得知，此时经过JS变量引入的图片是没有经过webpack打包压缩的，我们通过npm run build来证明我们的结论。

假如我们把代码还原成以的形式，先rm -rf dist删除打包出来的目录，然后重新打包，

结果为：

因此，证明了文件没有经过webpack打包。

解决方法很简单：

这就是所谓的CommonJS风格，还有一种解决方案，使用ES6的import函数，同样可以解决这个问题。

ES6的Import不仅可以进行模块的导入导出，还可以引入一个资源，该函数返回的是一个Promise对象，在then方法中可以获得资源的路径。另外一个就是import只能引入静态资源，不能进行JS字符串的拼接。我们基于require的语法继续扩展一下，大家可以尝试配置一个json-loader,把所以需要JS变量引入的图片路径全部配置到里面去，然后通过require()动态的获取。

补充：webpack采用的是CommonJS语法，从这个console打印的内容确实可以看出。