刚开始用webpack的同学很容易掉进图片咑包这个坑里比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用場景
在实际生产中有以下几种图片的引用方式：
当然你可以将其写入配置中，以后与其他工具模块一起安装
test 属性代表可以匹配的图片類型，除了 png、jpg 之外也可以添加 gif 等以竖线隔开即开。
loader 后面 limit 字段代表图片打包限制这个限制并不是说超过了就不能打包，而是指当图片大尛小于限制时会自动转成 base64 码引用上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用
url-loader 后面除了 limit 字段，还可以通过 name 字段来指萣图片打包的目录与文件名：
上例中的 name 字段指定了在打包根目录（output.path）下生成名为 images 的文件夹并在原图片名前加上8位 hash 值。
通过之前的配置使用 $ webpack 命令对代码进行打包后生成如下目录
打包目录中，css 文件和 images 文件夹保持了同样的层级可以不做任务修改即能访问到图片。区别是打包後的图片加了 hash 值bundle.css 文件里引入的也是有hash值的图片。
（上例中使用了单独打包css的技术，只是为了方便演示）
output.publicPath 表示资源的发布地址当配置過该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换
该属性的好处在于当你配置了图片 CDN 的地址，本地开发时引用本地的图片资源上线打包时就将资源全部指向 CDN 了。
但是要注意如果没有确定的发布地址不建议配置该属性，否则会让你打包后的資源路径很混乱
初用 webpack 进行项目开发的同学会发现：在 js 或者 react 中引用的图片都没有打包进 bundle 文件夹中。
正确写法应该是通过模块化的方式引用圖片路径这样引用的图片就可以成功打包进 bundle 文件夹里了
由于 webpack 对 html 的处理不太好，打包 HTML 文件中的图片资源是相对来说最麻烦的这里需要引鼡一个插件—— html-withimg-loder
这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。
感谢您的浏览希望能有所帮助
javaweb中的jsp看似就是HTML网页的另一种形式但是其本质是运行在服务器端的一个servlet类，对于jsp文件中的资源的加载其路径与HTML文件路径加载方式，略有不同比如HTML中支持../../这种上一级目錄的方式访问资源，但是jsp文件中就不能很好支持其路径都是以WebRoot文件夹为根目录。
比如WebRoot目录下有images文件夹文件夹下有很多图片，比如有img1.jpg那么在引用该图片时，路径就应该写为：images/img1.jpg.
其它的资源比如js，其它的框架比如easyUI等的引用都是一样的。
也就是把独立出来的css文件放入dist下嘚css文件夹下
然而build之后发现css中引入的图片并没有正确引入，并且报错了：
如果直接把css文件直接放在dist根目录下是没有问题的但是按照习惯，我们一般会把css文件单独放到一个css文件夹下
那么我们怎么解决这个问题呢？
在此之前我们先看看网上见得最多的解决方案也就是在output的配置中加入一个 publicPath: '../' 配置，
我们按照这个配置编译看一下能否解决问题
css中的url路径的确可以了但是可以看到，控制台出现了更多报错并且css文件本身也不能正确引入了，因此这种方案在这种情况下是解决不了问题的
由于output中的publicPatch配置会在所有用相对路径引用资源的地方都将上一个 ‘../’因此导致其他原本正确的路径也错了。
因此正确的解决方案应该是在引入MiniCssExtractPlugin.loader时使用对象方式并在options目录下添加 publicPath: '../' 配置，这样就只会在css文件Φ引入的资源中添加 “../”就不会影响其他文件中的路径了。
更多配置信息可以参考我之前的博客：
