个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 15:41:24 26 4
gpt4 key购买 nike

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

怎么了？如何补救？

最佳答案

文档必须说的内容:

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)
    ],
};

关于javascript - 启用源映射时不会加载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40752796/

26 4 0
文章推荐： javascript - 如何更正此 react 语法错误？
文章推荐： javascript - 在分解长时间运行的 JavaScript 任务时避免强制延迟 setTimeout
文章推荐： javascript - 聊天框滚动到底部
文章推荐： javascript - Angular2 $http promise 与 Promise.all()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com