【webpack脱坑指南】打包之后css中资源文件路径不正确

bug描述

项目中使用了 layer，在执行 webpack 打包编译之后，layer.css 文件中用到的资源文件路径找不到，导致放大和关闭图标无法在页面上正常显示。

原因：（来自官方文档）

对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。

就是说：当你 require 了一些第三方插件或者网络资源，并且这些资源中包含 uri 属性，比如 css 中的 background:url(./icon.png) no-repeat}，那就要使用output.publicPath，否则就会找不到该路径。当然，如果这些资源中不包含 uri，那这个属性就没用。

解决方法

在配置项内加入 publicPath 属性，设置为部署时的绝对路径。
比如：我的页面通过如下url 方式让用户访问

http://xx.xx.xx.xx:9627/client/webapp/images/icon-551539f873d9ebe0792b120a9867d399.png

那么 pubilcPath 的值就应该是 ‘/client/webapp/images/’，也就是部署接口地址。

{
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'images',
                        name: '[name]-[hash].[ext]',
                        publicPath:"/client/webapp/images/"   
                    }
                }
            },

这样做之后，webpack打包时还会将图片复制到 /images 路径下，但是它还会把 css 文件中的 background url 改写为 publicPath + name .