启用源映射时不会加载图像

Question

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。两个图像都不显示。但是如果你从 css 加载器中删除 sourceMap 查询参数，它就会成功。

怎么了？如何补救？

Answer 1

文档的内容：

style-loader:

Note about source maps support and assets referenced with url: when style loader is used with ?sourceMap option, the CSS modules will be generated as Blobs, so relative paths don't work (they would be relative to chrome:blob or chrome:devtools). In order for assets to maintain correct paths setting output.publicPath property of webpack configuration must be set, so that absolute paths are generated.

css-loader:

They are not enabled by default because they expose a runtime overhead and increase in bundle size (JS SourceMap do not). In addition to that relative paths are buggy and you need to use an absolute public path which include the server url.

这里是 some related issues。

因此，当您启用源地图时，css 文件将作为 blob 添加。并且相对路径停止工作。我猜是 style-loader 干的。无意冒犯，也许没有更好的办法。

处理它的一种方法是...禁用源映射 :) 第二种，在 output.publicPath 中指定绝对 url。我所说的绝对是指拥有域名的人。第三个选项是...将 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)
    ],
};

启用源映射时不会加载图像

Images don't get loaded when source maps are enabled

javascript

css

source-maps

webpack

css-loader