Best IT Recipes

Webpack css-loader cannot find image in url () url in external stylesheet

I am new to the world of Node / NPM / Webpack, so I apologize if this is obvious.

I am trying to create a simple external project bundled with Webpack. I have node installed and the package.json file is configured. If I run "npm start" in my root directory, I get no errors from the console, and I can go to "localhost: 3000" in the browser and see my "hello world".

My next task is to include a stylesheet that contains a link to the image, for example:

.myimg {background: url(path/to/file.jpg);}

With settings like this, I can view the image through a webpack-dev server (by going to localhost: 3000 in a web browser), but if I create a project, the image path is wrong. I have no idea what I'm doing wrong, so I throw it at the Stackiverse in the hope that someone out there will find out what a stupid thing I'm doing.

Here is my 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 is my 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 then the 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>

... file "start.js" specified in the configuration file:

 require('./test.css'); console.log("yu no work?");

... and finally the contents of the css file itself:

 .imgtest { background: url(img/volcano.jpg);}

As I said above, in the world of webpack-dev-server, the path to the image resolves correctly, and it appears as the background of the DOM element. In the published world, the browser tells me that it cannot find the file, and the wrong path to the file is clearly displayed in the Safari console:

 http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg

The correct local path is:

 http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg

It’s clear that I am doing something wrong, but I can’t understand that. Any help or advice is appreciated.

Thank!

+48
webpack
Jul 21 '15 at 20:44
source share
2 answers

Good ... pooh. I just figured it out. The problem was in the publicPath variable inside webpack.config.js. I had this:

 publicPath: '/build/'

... which in retrospect is obviously an absolute path. Instead, I needed:

 publicPath: './build/'

... which is a relative path. Now everything is working.

UPDATE:

I am still very new to Webpack, so all this is still pretty confusing. Having said that ...

I think I did the wrong thing. My Webpack project had an index.html file in the root of the project, and I tried to use it as the file that the webpack-dev server got to, and what would be used as an entry point. It didn’t cause me any headaches, and I don’t think that any solution I came across really worked. Then I found this:

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

This allows you to create an index.html page from a template, which means that in fact it should not exist as a file. webpack-dev-server creates it on the fly and saves it in memory, and when you publish "build" in your folder, the index.html file is created in this folder.

There may be a sure “right” way to deal with the problem that I have touched on here, but it seems to work very well, and it works without problems, as it completely eliminates the whole issue.

In any case, this is a kind of incoherent attitude. I hope this helps someone, and / or I hope that someone who knows more about this comes here and sets me straight.

+29
Jul 21 '15 at 21:05
source share

The ERROR I encountered was

 Module parse failed: PATH:\TO\IMG\XYZ.PNG Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character ' ' (1:0) . . . . . @ ./~/css-loader!./~/sass-loader!./node/static/sass/style.scss 6:399692-399747


This solves my problem:

 module: { . . .,{ test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"), root: path.resolve('./node/static/sass') }, { test: /\.(jpe?g|gif|png)$/, loader: 'file-loader?emitFile=false&name=[path][name].[ext]' } ]}

Launch your web package again.

Add the whole background: url('~/../somePath/toImage.png');

 > thunderbolt@0.0.1 react-build PATH:\TO\PROJECT > webpack --watch --display-error-details --display-cached --content-base ./ Hash: f6e4cbbf0068b5792247 Version: webpack 1.13.2 Time: 4882ms Asset Size Chunks Chunk Names js/bundle.js 760 kB 0 [emitted] main css/bundle.css 393 kB 0 [emitted] main + 180 hidden modules Child extract-text-webpack-plugin: + 76 hidden modules

to briefly explain what the file loader does - it copies the file to a new path and places this path in css, since my CSS file was nested in some public folder, while the file loader pasted it into the public root directory, with path = [ path] defined, it will still process the relative path. So disabling this completely solves my relative paths problem and adds that I have a folder with attached images, so this avoids the problem of resolving these paths. And a duplicate of the same image is what I don't need.

+10
Sep 06 '16 at 9:47
source share


More articles: