1

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 加载器中删除查询参数，它会解决的。

怎么了？如何补救？

4

1 回答 1

2

医生必须说的话：

style-loader：

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

css-loader：

默认情况下不启用它们，因为它们会暴露运行时开销并增加包大小（JS SourceMap 不会）。此外，相对路径有问题，您需要使用包含服务器 url 的绝对公共路径。

这里有一些 相关的 问题。

因此，当您启用源映射时，css 文件将作为 blob 添加。并且相对路径停止工作。我的猜测是它style-loader正在做。这里没有冒犯，也许没有更好的方法。

处理它的一种方法是...禁用源映射 :) 第二种方法是在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)
    ],
};
于 2016-11-22T22:28:12.403 回答