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。