關於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);