webpack css-loader not finding images within url() reference in an external stylesheet

Okay…ugh. I just figured it out. The problem was with the “publicPath” variable inside webpack.config.js. I had this:

publicPath: '/build/'

…which in retrospect is obviously an absolute path. What I needed instead was this:

publicPath: './build/'

…which is a relative path. Things seem to work now.

UPDATE:

I’m still very new to Webpack, so all of this is still pretty confusing. Having said that…

I think I’ve gone about this the wrong way. My Webpack project has had an index.html file at the root of the project, and I was trying to use that both as the file the webpack-dev-server would hit AND what the build would use as its entry point. That was causing me no end of headaches, and I don’t think any solution I hit upon really worked. Then I found this:

https://www.npmjs.com/package/html-webpack-plugin

This lets you create your index.html page from a template, which means it doesn’t actually have to exist as a file. webpack-dev-server creates it on the fly and stores it in memory, and when you publish to your “build” folder, an index.html file gets created within that folder.

There may be a true “right” way to handle the problem I raised here, but this seems to work really well, and in a roundabout way, it solves my problems, since it ducks the whole path question entirely.

Anyway, this is kind of rambling. I hope it helps somebody, and/or I hope somebody who knows more about this comes here and sets me straight.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)