Изображения не загружаются при включении исходных карт

package.json:

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3"
  }
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.png$/, loader: 'file'},
            {test: /\.css$/, loaders: ['style', 'css?sourceMap']},
            {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template.ejs',
        }),
    ],
};

template.ejs:

<!doctype html>
<html>
<body>

<div></div>

</body>
</html>

1.js:

require('./1.css');
require('./1.sass');

1.sass:

div
    width: 100px
    height: 100px
    margin: auto
    background: url(1.png) no-repeat

1.css:

body {
    margin: 0;
    background: url(1.png) no-repeat;
}

затем

$ npm i
$ rm -rf dist/* && ./node_modules/.bin/webpack

И открыть http://example.com/dist в браузере. Оба изображения не отображаются. Но если вы удалите sourceMap запрос параметров из загрузчиков CSS, это сработает.

В чем дело? Как это исправить?

Источник

1 ответ

Решение

Что должен сказать док:

style-loader:

Примечание о поддержке исходных карт и ресурсах, на которые ссылается url: при использовании загрузчика стилей с параметром? SourceMap модули CSS будут генерироваться как BLOB-объекты, поэтому относительные пути не будут работать (они будут относиться к chrome:blob или chrome:devtools). Чтобы ресурсы могли поддерживать правильные пути, необходимо установить свойство output.publicPath конфигурации веб-пакета, чтобы генерировались абсолютные пути.

css-loader:

Они не включены по умолчанию, потому что они представляют накладные расходы времени выполнения и увеличивают размер пакета (JS SourceMap нет). Кроме того, относительные пути содержат ошибки, и вам необходимо использовать абсолютный открытый путь, который включает URL-адрес сервера.

И вот некоторые связанные вопросы.

Поэтому, когда вы включаете исходные карты, CSS-файлы добавляются в виде BLOB-объектов. И относительные пути перестают работать. Я думаю, это style-loader делает. Не обижайся здесь, может быть, нет лучшего способа.

И один из способов справиться с этим - отключить исходные карты:) Второй - указать абсолютный URL в output.publicPath, Под абсолютным я подразумеваю доменное имя. И третий вариант... извлечь код CSS в отдельные файлы, с extract-text-webpack-plugin,

Вот webpack.config.js с кодом, решающим проблему, закомментировано. Выберите вариант, который подходит вам лучше всего:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
        // publicPath: 'http://example.com/dist/',   // (2)
    },
    module: {
        loaders: [
            {test: /\.png$/, loader: 'file'},
            {test: /\.css$/, loaders: ['style', 'css?sourceMap']},
            // {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap')},   // (3)
            {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']},
            // {test: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')},   // (3)
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template.ejs',
        }),
        // new ExtractTextPlugin('[name].css'),   // (3)
    ],
};
Источник
Другие вопросы по тегам