webpack css-loader在外部样式表的url()引用中找不到图像

我是整个Node / NPM / Webpack世界的新手,所以如果这是显而易见的道歉。

我试图build立一个简单的前端项目与Webpack捆绑在一起。 我已经安装了节点,并configuration了一个package.json文件。 如果我在根目录下运行“npm start”,我不会从控制台得到任何错误,并且可以在浏览器中转到“localhost:3000”,看到我的“hello,world”输出。

我的下一个任务是包含一个样式表,其中包含对图像的引用,如下所示:

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

通过这样的设置,我可以通过webpack-dev-server(通过web浏览器中的localhost:3000)来查看图像,但是如果构build项目,则图像的path是错误的。 我不知道自己做错了什么,所以我把这些东西扔给了Stackiverse,希望有人知道我在做什么愚蠢的事情。

这是我的package.json文件:

 { "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" } } 

…这是我的webpack.config.js文件:

 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' } ] } }; 

…然后是index.html文件:

 <!doctype html> <html> <head> <title>Webpack Test</title> </head> <body> <div class="imgtest">hello, world</div> <script src="build/bundle.js"></script> </body> </html> 

…configuration文件中引用的“start.js”文件:

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

最后是css文件本身的内容:

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

就像我在顶层所说的那样,在webpack-dev-server的世界中,图像的path正确地parsing,并且显示为DOM元素的背景。 在发表的世界里,浏览器告诉我找不到文件,Safari的控制台清楚地显示了一个不好的文件path:

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

正确的本地path是这样的:

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

显然,我做错了什么,但是我弄不清楚是什么。 任何帮助或build议表示赞赏。

谢谢!

好吧…啊。 我只是想出来了。 问题是webpack.config.js中的“publicPath”variables。 我有这个:

 publicPath: '/build/' 

现在回想起来显然是一条绝对的道路。 我需要的是这样的:

 publicPath: './build/' 

…这是一个相对path。 事情似乎现在起作用。

更新:

我对Webpack还是很陌生的,所以这些都还是很混乱。 话说回来…

我想我已经走错了方向。 我的Webpack项目在项目的根目录下有一个index.html文件,我试图使用它作为webpack-dev-server将要打开的文件,以及构build将用作它的入口点的文件。 这让我头痛不已,而且我不认为有什么解决办法可以奏效。 然后我发现这个:

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

这可以让你从一个模板创build你的index.html页面,这意味着它实际上并不需要作为一个文件存在。 webpack-dev-server会立即创build并将其存储在内存中,当您发布到“build”文件夹时,将在该文件夹中创build一个index.html文件。

可能有一个真正的“正确”的方法来处理我在这里提出的问题,但这似乎工作得很好,迂回地解决了我的问题,因为它完全杜绝了整个path问题。

无论如何,这是散漫的。 我希望这有助于某人,并且/或者我希望对此有更多了解的人来到这里,让我直言不讳。

我面对的错误是

 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 

这解决了我的问题:

 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]' } ]} 

再次运行你的webpack。

追加所有的背景: 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 

简而言之,文件加载器是做什么的 – 它将文件复制到一个新的path,并将该path放在CSS中,对于我的情况,CSS文件嵌套在某个公共文件夹中,而文件加载器将其粘贴到公共的根目录中,与path= [path]定义它仍然manpulate相对path。 因此,禁用这完全解决了我的相对path的问题,并添加我有嵌套的图像文件夹,所以这避开了解决这些path的挑战。 而同样的图像的双重副本是我不需要的东西。