webpack css-loader не находит изображения в ссылке url() во внешней таблице стилей

Я новичок во всем мире Node/NPM / Webpack, поэтому извиняюсь, если это очевидно.

Я пытаюсь создать простой интерфейсный проект в комплекте с Webpack. У меня установлен node и есть пакет.JSON-файл настроен. Если я запускаю " npm start "в своем корневом каталоге, я не получаю ошибок из консоли, и я могу перейти в" localhost:3000 "в браузере и увидеть мой вывод" hello, world".

моя следующая задача-включить таблицу стилей, которая содержит ссылку на вот такой образ:--9-->

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

С такими настройками я могу просматривать изображение через webpack-dev-server (перейдя в localhost:3000 в веб-браузере), но если я создам проект, Путь к изображению будет неправильным. Я понятия не имею, что я делаю не так, поэтому я бросаю это в Stackiverse в надежде, что кто-то там узнает, какую глупость я делаю.

вот мой пакет.файл 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.конфиг.файл 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>

...начало.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

очевидно, я делаю что-то не так, но я не могу понять, что. Любая помощь или совет приветствуются.

спасибо!

48
node.js webpack webpack-style-loader

2 ответов

ОК...тьфу. Я только что понял. Проблема заключалась в переменной "publicPath" внутри webpack.конфиг.js. У меня было такое:

publicPath: '/build/'

...что в ретроспективе, очевидно, является абсолютным путем. Вместо этого мне нужно было вот что:--3--> 

publicPath: './build/'

...это относительный путь. Кажется, теперь все работает.

обновление:

Я все еще очень новичок в Webpack, поэтому все это по-прежнему довольно запутанно. Сказав что...

Я думаю, что я пошел по ложному пути. У моего проекта Webpack был индекс.html-файл в корне проекта, и я пытался использовать его как файл, в который попадет webpack-dev-server, так и то, что сборка будет использовать в качестве точки входа. Это вызывало у меня бесконечные головные боли, и я не думаю, что какое-либо решение, которое я нашел, действительно сработало. И тут я обнаружил следующее:--3-->

https://www.npmjs.com/package/html-webpack-plugin

этот позволяет создать индекс.html-страница из шаблона, что означает, что на самом деле она не должна существовать как файл. webpack-dev-server создает его на лету и сохраняет в памяти, а при публикации в папке "build" - индекс.HTML-файл создается в этой папке.

может быть истинный "правильный" способ справиться с проблемой, которую я поднял здесь, но это, похоже, работает очень хорошо, и окольным путем он решает мои проблемы, так как он уклоняется от всего вопроса пути полностью.

в любом случае, это как-то бессвязное. Я надеюсь, что это поможет кому-то, и/или я надеюсь, что кто-то, кто знает больше об этом, придет сюда и исправит меня.

30

ошибка, с которой я столкнулся, была

Module parse failed: PATH:\TO\IMG\XYZ.PNG  Unexpected character '�' (1:0)
 You may need an appropriate loader to handle this file type.
 SyntaxError: Unexpected character '�' (1:0)

.
.
.
.
.
@ ./~/css-loader!./~/sass-loader!./node/static/sass/style.scss 6:399692-399747

это решает мою проблему: 

module: {
.
.
.,{
       test: /\.scss$/,
       exclude: /node_modules/,
       loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader"),
       root: path.resolve('./node/static/sass')
   },
   {
     test: /\.(jpe?g|gif|png)$/,
     loader: 'file-loader?emitFile=false&name=[path][name].[ext]'
    }
  ]}

запустите webpack еще раз.

добавить весь фон:url('~/../somePath/toImage.png');

> thunderbolt@0.0.1 react-build PATH:\TO\PROJECT
> webpack --watch --display-error-details --display-cached --content-base ./

Hash: f6e4cbbf0068b5792247
Version: webpack 1.13.2
Time: 4882ms
         Asset    Size  Chunks             Chunk Names
  js/bundle.js  760 kB       0  [emitted]  main
css/bundle.css  393 kB       0  [emitted]  main
    + 180 hidden modules
Child extract-text-webpack-plugin:
        + 76 hidden modules

чтобы объяснить вкратце, что делает загрузчик файлов - он копирует файл на новый путь и помещает этот путь в css, для моего случая CSS-файл был вложен в некоторую общую папку, тогда как загрузчик файлов вставил бы его в корень public, с path=[path] определил бы его все равно manpulate относительный путь. Таким образом, отключение этого полностью решает мою проблему относительных путей и добавить папку вложенных изображений, поэтому это уклоняется от решения этих путей. И двойная копия тех же изображений-это то, что мне не нужно.

12