node.js - webpack css-loader not finding images within url() reference in an external stylesheet -
i'm new whole node/npm/webpack world, apologies if obvious.
i'm attempting build simple front-end project bundled webpack. i've got node installed, , have package.json file configured. if run "npm start" in root directory, no errors console, , i'm able go "localhost:3000" in browser , see "hello, world" output.
my next task include stylesheet, contains reference image, this:
.myimg {background: url(path/to/file.jpg);}
with things set this, can view image via webpack-dev-server (by going localhost:3000 in web browser), if build project, path image wrong. have no idea i'm doing wrong, i'm throwing out stackiverse in hopes out there know stupid thing i'm doing.
here's package.json file:
{ "name": "webpack-test1", "version": "0.0.1", "description": "my project wtf.", "private": true, "scripts": { "start": "node server.js" }, "devdependencies": { "css-loader": "^0.15.2", "file-loader": "^0.8.4", "style-loader": "^0.12.3", "url-loader": "^0.5.6" }, "dependencies": { "webpack": "^1.9.6", "webpack-dev-server": "^1.8.2" } } ...and here's webpack.config.js file:
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ "./src/start.js" ], output: { filename: "bundle.js", path: path.join(__dirname, 'build'), publicpath: '/build/' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(png|jpg)$/, loader: 'file-loader' } ] } }; ...and index.html file:
<!doctype html> <html> <head> <title>webpack test</title> </head> <body> <div class="imgtest">hello, world</div> <script src="build/bundle.js"></script> </body> </html> ...the "start.js" file referenced in config file:
require('./test.css'); console.log("y u no work?"); ...and finally, contents of css file itself:
.imgtest { background: url(img/volcano.jpg);} like said @ top, in webpack-dev-server world, path image resolves properly, , shows background dom element. in published world, browser tells me can't find file, safari's console showing bad file path:
http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg the correct local path this:
http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg clearly, i'm doing wrong, can't figure out what. or advice appreciated.
thanks!
okay...ugh. figured out. problem "publicpath" variable inside webpack.config.js. had this:
publicpath: '/build/' ...which in retrospect absolute path. needed instead this:
publicpath: './build/' ...which relative path. things seem work now.
update:
i'm still new webpack, of still pretty confusing. having said that...
i think i've gone wrong way. webpack project has had index.html file @ root of project, , trying use both file webpack-dev-server hit , build use entry point. causing me no end of headaches, , don't think solution hit upon worked. found this:
https://www.npmjs.com/package/html-webpack-plugin
this lets create index.html page template, means doesn't have exist file. webpack-dev-server creates on fly , stores in memory, , when publish "build" folder, index.html file gets created within folder.
there may true "right" way handle problem raised here, seems work well, , in roundabout way, solves problems, since ducks whole path question entirely.
anyway, kind of rambling. hope helps somebody, and/or hope knows more comes here , sets me straight.
Comments
Post a Comment