启用源地图时不会加载图像答案

【问题标题】：Images don't get loaded when source maps are enabled启用源地图时不会加载图像
【发布时间】：2016-11-22 22:28:12
【问题描述】：

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 查询参数，它就会解决。

怎么了？如何解决？

【问题讨论】：

您应该在此处发表评论，注意这是一个规范的自我回答帖子，以及您观察到的情况，您认为这对问答是必要的。这样，在阅读您的问题时，不会有人对答案应包含的意图感到困惑。
@TravisJ 确实，我自己回答了我的帖子。也许这个问题是规范的。至于情况，我不太明白有什么不清楚的地方。我想拥有源地图，但是当我启用它们时，图像消失了。最后有两个问题：1）是什么导致了问题，2）如何解决它。请详细说明。
我发现当您将问题和答案作为一对发布时，对问题留下自我解释性评论是有益的，这样如果人们略过您的帖子（tl;dr; ) 他们还可以参考正在发生的事情。

标签： javascript css webpack source-maps css-loader

【解决方案1】：

文档是怎么说的：

style-loader:

关于源映射支持和通过 url 引用的资源的注意事项：当样式加载器与 ?sourceMap 选项一起使用时，CSS 模块将生成为 Blob，因此相对路径不起作用（它们将相对于 chrome:blob 或铬：开发工具）。为了让资产保持正确的路径设置，必须设置 webpack 配置的 output.publicPath 属性，以便生成绝对路径。

css-loader:

默认情况下不启用它们，因为它们会暴露运行时开销并增加包大小（JS SourceMap 不会）。此外，相对路径有问题，您需要使用包含服务器 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)
    ],
};

【讨论】：