关于webpack的file-loader与url-loader打包出现路径不对的问题

 

这个是试验包

链接：https://pan.baidu.com/s/17zlR7WIRDw3y18Kk7mJYUA 
提取码：o4pr 
复制这段内容后打开百度网盘手机App，操作更方便哦

笔者在搭建的webpack的包目录结构如下

但是打出来的包却说在src/css中找不到image/ceshi1.png文件。后来发现问题了

需要这样去设置

 默认image是src中图片的文件夹

      {
                test:/\.(png|gif|jpg)$/,
                exclude: /node_modules/,
                use: {
                    loader:'url-loader',
                    options:{
                        limit:10*1024,  
                            outputPath:'image',//决定打包出来的文件的路径 在 dist 下的路径
                            publicPath:'../image',//决定引用的文件的路径 publicPath+name = css中引用的url的路径
                            name:'[name].[ext]', //文件的名字
                            //专准确的说是css 中的 url(publicPath+name) 是最后的引用路径
                            //图片的名字可以自己修改，或者不修改 重要的是
                            //最终在dist下打败爆出来决定图片的path的是（图片+名字）的路径= outputPath/name 
                            //只有当路径 outputPath/name  === css 中的 url(publicPath+name)才能被引用的到
                    }
                } 
            }

默认dist文件加是打包的文件夹

 一，在publicPath不被使用的情况下。 

      1>dist中被打包出来的image的素材路径 = dist/outputPath

      2>css中被引用的，素材的路径是 url(outputPath+name); 在上述的目录下会出现问题，就是找不到相应的素材

二，在使用publicPath的情况下

     1>dist中被打包出来的image的素材路径 = dist/outputPath

      2>css中被引用的，素材的路径是 url(publicPath+name); 正好处理上面出现的问题

说白了是 outputPath素材被复制在dist下的路径，publicPath是css中url(路径publicPath+name);