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

濮阳弘扬

2023-03-14

问题内容：

我是整个Node / NPM / Webpack世界的新手，所以很抱歉，如果这很明显。

我正在尝试构建一个与Webpack捆绑在一起的简单前端项目。我已经安装了节点，并配置了package.json文件。如果我在根目录中运行“ npm
start”，则从控制台不会出现任何错误，并且能够在浏览器中转到“ localhost：3000”，并看到“ hello，world”输出。

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

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

通过这样的设置，我可以通过webpack-dev-
server查看图像（通过在Web浏览器中转到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文件。

可能存在一种真正的“正确”方式来处理我在这里提出的问题，但这似乎确实很有效，并且以一种about回的方式，它可以解决我的问题，因为它完全避免了整个路径问题。

无论如何，这是种无聊的事情。我希望它能对某人有所帮助，和/或希望对此有更多了解的人来这里，使我直率。

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

相关阅读

相关文章

相关问答

相关工具

相关文档