Webpack和Sass正確處理后台：url（）圖像但是當與webpack-dev-server一起使用時找不到它

Question

我正在使用Webpack 2和webpack-dev-server以及Sass加載器，實際配置：

{
    test: /\.scss/,
    loaders: [
        "style",
        { loader: "css", query: { modules: false, sourceMap: true } },
        { loader: "resolve-url" },
        { loader: "sass", query: { sourceMap: true } }
    ]
}

這非常有效， background: url()引用的圖像background: url()由webpack處理，並且在樣式中替換為background-somehash.jpg ，可以通過鍵入http://localhost:8080/background-somehash.jpg來訪問此文件。 http://localhost:8080/background-somehash.jpg 。 當我使用開發人員工具在樣式背景定義中提供整個URL（包括localhost）時，它也有效...

唯一不起作用的是webpack生成的原始css，它看起來像background: url(background-somehash.jpg) 。 我也嘗試過各種URL一樣./ ， ../ ， ../../或./images/嘗試，如果根被設置在某種程度上有所不同。 我沒有得到的是該文件在根目錄下可用...

編輯：當與extract-text-webpack-plugin一起使用時，它將樣式提取到單獨的真實styles.css文件中，它可以正常工作。 問題是為什么當從javascript包提供最終的css時它不起作用？

澄清：一切都被正確引用，圖像可用，當我使用extract-text-webpack-plugin將css提取到單獨的文件中時，它只是在從bundle.js完全相同的css時bundle.js在index.html引用，如<link href="blob:..." rel="stylesheet">

Answer 1

你應該檢查的事情：

引用的圖像是否被webpack識別？

只需刪除圖像並檢查webpack構建是否失敗。 如果是這種情況，那么您的加載程序配置不是問題。

使用瀏覽器開發人員工具檢查請求的URL

如果請求以404終止：

• 檢查output.publicPath （webpack）/ contentBase （webpack-dev-server）是否指向同一位置。 這是從瀏覽器的角度來看（=沒有絕對文件路徑）

• 如果您使用的是<base> -tag，則需要確保它確實正確替換了基本URL。