我是整个 Node/NPM/Webpack 世界的新手，如果这很明显，请道歉。
我正在尝试构建一个与 Webpack 捆绑的简单前端项目。我已经安装了 Node ，并配置了一个 package.json 文件。如果我在我的根目录中运行“npm start”，我不会从控制台收到任何错误，并且我可以在浏览器中转到“localhost:3000”并查看我的“hello, world”输出。
我的下一个任务是包含一个样式表，其中包含对图像的引用，如下所示:
.myimg {背景:url(path/to/file.jpg);}
通过这样的设置，我可以通过 webpack-dev-server 查看图像(通过在网络浏览器中访问 localhost:3000)，但是如果我构建项目，图像的路径是错误的。我不知道我做错了什么，所以我把它扔到了 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>
...配置文件中引用的“start.js”文件:
require('./test.css');
console.log("y u no work?");
...最后是css文件本身的内容:
.imgtest { background: url(img/volcano.jpg);}
就像我在顶部所说的，在 webpack-dev-server 世界中，图像的路径可以正确解析，并显示为 DOM 元素的背景。在已发布的世界中，浏览器告诉我它找不到文件，Safari 的控制台清楚地显示了错误的文件路径:
http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
正确的本地路径是这样的:
http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
很明显，我做错了什么，但我不知道是什么。感谢您提供任何帮助或建议。
谢谢!
最佳答案
好吧……呃。我刚刚想通了。问题出在 webpack.config.js 中的“publicPath”变量上。我有这个:
publicPath: '/build/'
...回想起来显然是一条绝对路径。我需要的是这个:
publicPath: './build/'
...这是一个相对路径。现在看来一切正常。
更新:
我对 Webpack 还是很陌生，所以所有这些仍然很困惑。说了这么多……
我认为我做错了。我的 Webpack 项目在项目的根目录中有一个 index.html 文件，我试图将它用作 webpack-dev-server 将命中的文件以及构建将用作其入口点的文件。这让我头疼不已，而且我认为我遇到的任何解决方案都没有真正奏效。然后我发现了这个:
https://www.npmjs.com/package/html-webpack-plugin
这使您可以从模板创建 index.html 页面，这意味着它实际上不必作为文件存在。 webpack-dev-server 动态创建它并将其存储在内存中，当您发布到“build”文件夹时，会在该文件夹中创建一个 index.html 文件。
可能有一种真正“正确”的方式来处理我在这里提出的问题，但这似乎工作得很好，并且以一种迂回的方式解决了我的问题，因为它完全回避了整个路径问题。
无论如何，这有点漫无边际。我希望它对某人有所帮助，和/或我希望对此有更多了解的人来到这里并让我直截了当。
关于node.js - webpack css-loader 在外部样式表的 url() 引用中找不到图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31549268/