webpack-simple 封装组件，图片资源打包问题

1、问题。

image.png

默认配置打包图片资源采用file-loader的方式打包，打包后，file-loader将xx.png移动到dist目录下生成静态资源，并将该图片改名为***.png。
打包后封装的组件是将打包后生成的js文件上传到npm或者私服，图片资源无法一起上传到npm或者私服。直接使用默认配置无法获取封装组件内的图片资源。在使用封装的组件时需要再次单独引入组件内的图片资源才能正常访问，使用不便。

2、解决办法。

image.png

将打包图片资源的方式改为：url-loader.url-loader将图片转化为base编码字符串和main.js打包到一起。上传组件后其他地方可以直接使用组件，不用担心静态资源的路径问题。将静态资源用url-loader的方式打包会导致组件资源包变大，封装时应尽量压缩图片或者少使用图片。