CODEWITHSUNDEEP
webpackcode-splitting
PinkyJie
PinkyJie

Reputation: 825

CSS url path in additional chunk of Webpack can not be resolved correctly

I use Code Spliting feature of webpack to lazy load my angular app. I want to put some css in additional chunks to let the app lazy load these styles, but I found the url path in these css can not be resolved correctly. See the attachments below: css-url-path-in-additional-chunk I have a background style for the h4 tag, but it can not be resolved correctly. At the same time, I have another img tag which use the same url on this page, the path is hard-coded in the src attribute, it can display correctly. url-in-html

====== update ======

My Webpack config is here: webpack.config.js, the styl file mentioned in the question is here: home-hero.styl, the header HTML file is here: header.jade.

Another thing needs noting is that when I right click the url link in the first picture and choose "open in new link", I got the full url is chrome-devtools://devtools/bundled/assets/images/logo.46e065707257b2930a699c7cdacd7e86.png, I think that's the main reason the picture can not be displayed.

Upvotes: 0

Views: 1079

Answers (1)

Matt Derrick
Matt Derrick

Reputation: 5724

Without seeing the directory structure of your application this is hard to diagnose but I assume your CSS file is not in the same directory as your HTML file therefore the path assets/images is actually incorrect for the background property in the CSS file, but correct for the <img> tag in HTML.

You want the URL to have a slash as the start e.g /assets/images so it doesn't matter where your CSS files reside, they will always resolve form the root.

Try using output.publicPath in your Webpack config.

output: {
    publicPath: '/'
}

Upvotes: 2

Related Questions