node.js webpack css-loader 在外部样式表中的 url() 引用中找不到图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31549268/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webpack css-loader not finding images within url() reference in an external stylesheet
提问by hairbo
I'm new to the whole Node/NPM/Webpack world, so apologies if this is obvious.
我是整个 Node/NPM/Webpack 世界的新手，如果这很明显，我很抱歉。
I'm attempting to build a simple front-end project bundled with Webpack. I've got node installed, and have a package.json file configured. If I run "npm start" in my root directory, I get no errors from the console, and I'm able to go to "localhost:3000" in a browser and see my "hello, world" output.
我正在尝试构建一个与 Webpack 捆绑在一起的简单前端项目。我已经安装了节点，并配置了 package.json 文件。如果我在根目录中运行“npm start”，则控制台不会出现任何错误，并且我可以在浏览器中转到“localhost:3000”并查看我的“hello, world”输出。
My next task is to include a stylesheet, which contains a reference to an image, like this:
我的下一个任务是包含一个样式表，其中包含对图像的引用，如下所示：
.myimg {background: url(path/to/file.jpg);}
.myimg {background: url(path/to/file.jpg);}
With things set up like this, I can view the image via the webpack-dev-server (by going to localhost:3000 in a web browser), but if I build the project, the path to the image is wrong. I have no idea what I'm doing wrong, so I'm throwing this out to the Stackiverse in the hopes that somebody out there will know what stupid thing I'm doing.
通过这样设置，我可以通过 webpack-dev-server 查看图像（通过在 Web 浏览器中访问 localhost:3000），但是如果我构建项目，图像的路径是错误的。我不知道我做错了什么，所以我把它扔到 Stackiverse 上，希望那里的人知道我在做什么愚蠢的事情。
Here's my package.json file:
这是我的 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"
}
}
...and here's my webpack.config.js file:
...这是我的 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' }
]
}
};
...and then the index.html file:
...然后是 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>
...the "start.js" file referenced in the config file:
...配置文件中引用的“start.js”文件：
require('./test.css');
console.log("y u no work?");
...and finally, the contents of the css file itself:
...最后，css文件本身的内容：
.imgtest { background: url(img/volcano.jpg);}
Like I said at the top, in webpack-dev-server world, the path to the image resolves properly, and it shows up as the background to the DOM element. In published world, the browser tells me it can't find the file, with Safari's console clearly showing a bad file path:
就像我在顶部所说的那样，在 webpack-dev-server 世界中，图像的路径正确解析，并且它显示为 DOM 元素的背景。在已发布的世界中，浏览器告诉我它找不到文件，Safari 的控制台清楚地显示了错误的文件路径：
http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
The correct local path is this:
正确的本地路径是这样的：
http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
Clearly, I'm doing something wrong, but I can't figure out what. Any help or advice is appreciated.
显然，我做错了什么，但我不知道是什么。任何帮助或建议表示赞赏。
Thanks!
谢谢！
采纳答案by hairbo
Okay...ugh. I just figured it out. The problem was with the "publicPath" variable inside webpack.config.js. I had this:
好吧……呃。我只是想通了。问题在于 webpack.config.js 中的“publicPath”变量。我有这个：
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...
我对 Webpack 还是很陌生，所以所有这些仍然很混乱。话说回来...
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:
我想我走错了路。我的 Webpack 项目在项目的根目录下有一个 index.html 文件，我试图将它用作 webpack-dev-server 将命中的文件以及构建将用作其入口点的文件。这让我头疼不已，我认为我找到的任何解决方案都没有真正奏效。然后我发现了这个：
https://www.npmjs.com/package/html-webpack-plugin
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.
这使您可以从模板创建 index.html 页面，这意味着它实际上不必作为文件存在。webpack-dev-server 动态创建它并将其存储在内存中，当您发布到“build”文件夹时，会在该文件夹中创建一个 index.html 文件。
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.
无论如何，这是一种散漫。我希望它对某人有所帮助，和/或我希望对此有更多了解的人来到这里并让我直截了当。
回答by Rahil Lakhani
ERROR that I had faced 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]'
}
]}
Run your webpack again.
再次运行你的 webpack。
Append all the background: url('~/../somePath/toImage.png');
附加所有背景： url('~/../somePath/toImage.png');
> [email protected] 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 explain in short, what file loader does is - it copies the file to a new path and puts that path in the css, for my case CSS file was nested within some public folder, whereas file loader would paste it in root of public, with path=[path] defined it would still manpulate the relative path. Thus disabling this completely solves my problem of relative paths and to add I have nested images folder so this evades the challenge of resolving these paths too. And dual copy of same images is something i dont need.
简而言之，文件加载器的作用是 - 它将文件复制到一个新路径并将该路径放在 css 中，对于我的情况，CSS 文件嵌套在某个公共文件夹中，而文件加载器会将其粘贴到 public 的根目录中，定义了 path=[path] 后，它仍然会处理相对路径。因此，禁用它完全解决了我的相对路径问题，并添加了我嵌套的图像文件夹，因此这也避免了解决这些路径的挑战。我不需要相同图像的双重副本。
