html5引用外文件css本地图片不显示,webpack css-loader在外部样式表的url（）引用中找不到图像...

我是整个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文件：

Webpack Test

hello, world

…配置文件中引用的“ 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

显然，我做错了，但我不知道该怎么办。任何帮助或建议，不胜感激。

谢谢！