webpack - 无法正确解析 Webpack 附加块中的 CSS url 路径

Question

我使用 webpack 的代码拆分功能来延迟加载我的 Angular 应用程序。我想在额外的块中放置一些 css 以让应用程序延迟加载这些样式，但我发现这些 css 中的 url 路径无法正确解析。请参阅下面的附件： 我有一个 h4 标签的背景样式，但无法正确解析。同时，我在这个页面上还有一个使用相同url的img标签，路径是硬编码在src属性中的，它可以正确显示。

======更新======

我的 Webpack 配置在这里：webpack.config.js，问题中提到的 styl 文件在这里：home-hero.styl，标头 HTML 文件在这里：header.jade。

还有一点需要注意的是，当我右键单击第一张图片中的 url 链接并选择“在新链接中打开”时，我得到了完整的 url chrome-devtools://devtools/bundled/assets/images/logo.46e065707257b2930a699c7cdacd7e86.png，我认为这是无法显示图片的主要原因。

Answer 1

如果没有看到应用程序的目录结构，这很难诊断，但我假设您的 CSS 文件与 HTML 文件不在同一目录中，因此路径assets/images实际上对于backgroundCSS 文件中的属性不正确，但对于<img>HTML 中的标记是正确的.

您希望 URL 以斜杠作为开头，例如/assets/images，这样无论您的 CSS 文件位于何处，它们都将始终从根目录解析。

尝试在 Webpack 配置中使用output.publicPath。

output: {
    publicPath: '/'
}