我对整个Node/NPM/Webpack世界都是新手，如果这是显而易见的，我深表歉意.
我正在try 构建一个与WebpackBundle 的简单前端项目.我已经安装了node，还有一个包.已配置json文件.如果我在根目录中运行"npm start"，我就不会从控制台收到任何错误，并且我能够在浏览器中转到"localhost:3000"，并查看我的"hello，world"输出.
我的下一个任务是包含一个样式表，其中包含对图像的引用，如下所示:
.myimg {background: url(path/to/file.jpg);}
通过这样的设置，我可以通过webpack dev服务器查看图像(通过在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"
}
}
...这是我的网页.配置.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' }
]
}
};
...然后是索引.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 world中，图像的路径会正确解析，并显示为DOM元素的背景.在published world中，浏览器告诉我它找不到文件，Safari的控制台清楚地显示了一个错误的文件路径:
http://localhost/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
正确的本地路径是:
http://localhost/~username/webpack1/build/1b05d814aa13ac035c6b122b9f5974f8.jpg
很明显，我做错了什么，但我不知道是什么.任何帮助或建议都将不胜感激.
谢谢