webpack4.0 html和css里圖片資源加載問題

先說一下我的問題吧，以下是我的目錄結(jié)構(gòu)（以下用test命名的文件/文件夾就是此次測試所用）

這個是一開始的webpack配置

這個是在sass中引用到的圖片

我希望的是打包后，src/img/test/test.png能夠變成dist/img/test/test.png，然而，當(dāng)我打包之后，卻發(fā)現(xiàn)變成了這樣子

圖片直接打包到了dist/img目錄之下，并且css之中引用的也是dist/css/img下的圖片，沒辦法，看文檔，結(jié)果我看到了這一句

我尋思著，這應(yīng)該就是對應(yīng)目錄的配置了吧（原諒我理解有問題），趕緊寫上去，結(jié)果是這樣

毛線啊，只不過是多了個src的相對路徑啊，問題根本沒變啊
之后還是到了找資料的過程，發(fā)現(xiàn)publicPath這個東西，

重點來了,publicPath說是自定義發(fā)布的目錄，其實就是將你打包后的css中引用的文件路徑給替換成publicPath的值，并且因為publicPath與name這兩個屬性可以是函數(shù)，并且兩者有一定的聯(lián)系，所以我們可以從這里下文章。

{
            test: /\.(png|jpg)$/,
            use: {
                loader: "url-loader",
                options:{
                    name: function(file){
                        console.log('----------111-------',file);
                    },
                    // name: '[name].[ext]',
                    limit: '8192',
                    publicPath: function(url){
                        console.log('----------222-------',url)
                    },
                    outputPath: 'img/',
                }
            }
        }

當(dāng)然，這樣子打包的是不完整的，打包后的圖片也是直接就在dist/img文件夾下，我們需要的是看看參數(shù)file與url是什么

一次是看不出什么的，我們再來一次

{
            test: /\.(png|jpg)$/,
            use: {
                loader: "url-loader",
                options:{
                    name: function(file){
                        console.log('----------111-------',file);
                        return 'QAQ/[name].[ext]'
                    },
                    // name: '[path][name].[ext]',
                    limit: '8192',
                    publicPath: function(url){
                        console.log('----------222-------',url)
                    },
                    outputPath: 'img/',
                }
            }
        }

emm,dist/img文件夾下多了個QAQ，file是引用圖片的絕對路徑，并且url就是這個name函數(shù)返回的值（我們假裝它是真的QAQ/test.png），那么接下來我們就可以繼續(xù)進行下一步

{
            test: /\.(png|jpg)$/,
            use: {
                loader: "url-loader",
                options:{
                    name: function(file){
                        var reg = /img\\(.*)\\([^\\]*)\.(png|jpg)$/,
                        dirStr = reg.exec(file)[1]
                        dirStr = dirStr?dirStr.replace(/\\/g,'/')+'/':''; 
                        return dirStr + '[name].[ext]'
                    },
                    // name: '[path][name].[ext]',
                    limit: '8192',
                    publicPath: function(url){
                        return path.resolve(__dirname,'dist/img',url).replace(/\\/g,'/')
                    },
                    outputPath: 'img/',
                }
            }
        }

在name這邊我使用了正則好從file中提取出對應(yīng)的文件夾比如'QAQ/',拼合成打包圖片的路徑返回，這樣子根據(jù)圖片生產(chǎn)對應(yīng)的文件夾這個問題就解決了，然后在publicPath這邊根據(jù)傳進來的url進行路徑拼接，得到打包后的圖片位置，并返回出去，結(jié)果如下圖

可以看到這已經(jīng)得到了我預(yù)期的效果，并且打包后的css中圖片引用路徑也是沒問題的。
希望這個能給樓主提供一些幫助，另外如果有錯誤的話還請各位指出，畢竟第一次寫東西語言有點混亂（躺）

樓上是錯的，你可以看這里。
這里有一個 webpack4 入門例子,你可以查看一下 https://github.com/crlang/eas... 。

圖片路徑問題是修改build==>utils.js：
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'  //加上這個
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
    
 css、js路徑問題是修改config==>index.js：
build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',  //把'/'改成'./'
    productionSourceMap: false,
    ...
   }