Я новичок во всем мире Node/NPM/Webpack, поэтому извиняюсь, если это очевидно.
Я пытаюсь создать простой внешний проект в комплекте с Webpack. У меня установлен node и настроен файл package.json. Если я запускаю "npm start" в моем корневом каталоге, я не получаю никаких ошибок с консоли, и я могу перейти на "localhost: 3000" в браузере и посмотреть мой "привет, мир".
Моя следующая задача - включить таблицу стилей, которая содержит ссылку на изображение, например:
.myimg {background: url(path/to/file.jpg);}
С настройками, подобными этому, я могу просмотреть изображение через webpack-dev-сервер (перейдя на 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
Ясно, что я делаю что-то неправильно, но я не могу понять, что. Любая помощь или совет приветствуются.
Спасибо!
