source-map omits some mappings when regenerating source map

オープン

#252 2016年11月26日に作成コメント 2 件リアクション 0 件担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度: 4/5
見積もり時間: 3〜5日
初心者へのやさしさ: 35/100

issue の種類: バグ
明瞭さ: 説明が足りない
活発さ: 停滞
技術スタック: javascript, webpack
領域: tooling

調査の方向性

提供された Webpack 3 の再現アーカイブ、package.json、webpack.config.js、1.scss から始め、文書化されている npm および webpack コマンドを実行します。webpack-sources の sourceAndMap() を source-map パッケージまで追跡し、ログに記録された mappings を期待されるエントリと比較します。再現された mappings が保持されるか、原因が回帰テストとともに文書化されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

feat

See next post for a lower level case.

I hope you don't mind me explaining how to reproduce the issue with webpack:

package.json:

{
  "dependencies": {
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "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');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './1.js',
    output: {
        path: 'dist',
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap&minimize!sass?sourceMap')},   // (1)
            // {test: /\.scss$/, loaders: ['style', 'css?sourceMap&minimize!sass?sourceMap']},   // (2)
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template.ejs',
        }),
        new ExtractTextPlugin('[name].css'),   // (1)
    ],
    devtool: 'source-map',   // (1)
};

template.ejs:

<!doctype html>
<html>
<body>

<div>
    <div></div>
</div>

</body>
</html>

1.js:

require('./1.scss');

1.scss:

div {
    width: 10px;
    div {
        width: 20px;
    }
}

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

With extract-text-webpack-plugin (1) you get source map in dist/main.css.map and the following mappings:

AAAA,IACI,UAAY,CAIf,QAFO,UAAY

([0,0](#0)=>[0,0])
    | ([1,4](#0)=>[0,4])
    | ([1,16](#0)=>[0,14])
    | ([5,1](#0)=>[0,15])
    | ([3,8](#0)=>[0,23])
    | ([3,20](#0)=>[0,33])

And if you open the page in Chrome (http://example.com/dist), open Developer Tools > Elements tab. Click on inner div, you'll see:

extract-text-webpack-plugin

Now, if you comment out lines marked with (1), and uncomment the one marked with (2), run webpack, you'll get the following mappings (in bundle.js, search for word mappings):

AAAA,IACI,UAAY,CAIf,AALD,QAGQ,UAAY,CACf

([0,0](#0)=>[0,0])
    | ([1,4](#0)=>[0,4])
    | ([1,16](#0)=>[0,14])
    | ([5,1](#0)=>[0,15])
    | ([0,0](#0)=>[0,15])   // source-map removes this
    | ([3,8](#0)=>[0,23])
    | ([3,20](#0)=>[0,33])
    | ([4,5](#0)=>[0,34])   // and this lines

and the following line in Chrome:

no-extract-text-webpack-plugin

Which is arguably correct. Anyways, line 6 doesn't even come close to it.

Now, if you change node_modules/webpack/lib/SourceMapDevToolPlugin.js like so:

--- node_modules/webpack/lib/SourceMapDevToolPlugin.js  2016-11-26 20:37:53.178777196 +0200
+++ node_modules/webpack/lib/SourceMapDevToolPlugin.js.new      2016-11-26 20:37:51.612119017 +0200
@@ -52,7 +52,16 @@
                                                return;
                                        }
                                        if(asset.sourceAndMap) {
+if (file == 'main.css') {
+console.log('number of children: ', asset.children.length);
+console.log(asset.children[0]._sourceMap.mappings);
+console.log(options);
+}
                                                var sourceAndMap = asset.sourceAndMap(options);
+if (file == 'main.css') {
+console.log('source changed: ', asset.children[0].source() != sourceAndMap.source);
+console.log(sourceAndMap.map.mappings);
+}
                                                var sourceMap = sourceAndMap.map;
                                                var source = sourceAndMap.source;
                                        } else {

you'll see:

number of children:  1
AAAA,IACI,UAAY,CAIf,AALD,QAGQ,UAAY,CACf
{ filename: '[file].map[query]',
  moduleFilenameTemplate: undefined,
  fallbackModuleFilenameTemplate: undefined,
  append: null,
  module: true,
  columns: true,
  lineToLine: false,
  noSources: false,
  test: /\.(js|css)($|\?)/i }
source changed:  false
AAAA,IACI,UAAY,CAIf,QAFO,UAAY

sourceAndMap() function is defined here. And here's where it passes control to source-map package.

Having that said, we can see that source map was changed, for no clear reason. Can you explain it? This seems like a bug in source-map.

Files needed to reproduce it with Webpack 3

主要言語: JavaScript
スター: 3.7k
フォーク: 370
PR マージ指標: 30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
リポジトリをフォークし、ブランチを切って変更します。
issue 番号を参照したプルリクエストを送ります。

mozilla/source-map のほかの issue

wasm-mappings fail to build with Rust 1.96+ オープン

難易度 2/5 1〜3時間初心者へのやさしさ 76/100

mozilla/source-map#530 · 2026年7月22日に作成
allow wasm to be bundled オープン

難易度 4/5 3〜5日初心者へのやさしさ 55/100

mozilla/source-map#527 · 2026年5月25日に作成
[RFH] smc.eachMapping is not a function オープン

難易度 4/5 3〜5日初心者へのやさしさ 45/100

mozilla/source-map#524 · コメント 6 件 · 2026年4月20日に作成
source map seems like not work, is there some hints from the perspective of source-map tool? オープン

難易度 4/5 3〜5日初心者へのやさしさ 25/100

mozilla/source-map#516 · 2025年3月28日に作成
Implement the proposal to add scopes and bindings information to source maps オープン

難易度 5/5 1週間以上初心者へのやさしさ 30/100

mozilla/source-map#510 · リアクション 1 件 · 2024年6月3日に作成

mozilla/source-map の issue をすべて見る

似ている issue

Ajv defaults: non-standard "format": "json" in third-party schemas (e.g. Notion) warns twice per property — register it like #2601 オープン

難易度 2/5 1〜3時間初心者へのやさしさ 70/100

modelcontextprotocol/typescript-sdk#2854 · 2026年9月24日に作成
[Bug]: ctx_search rejects singular 'query' param despite schema declaring it valid オープン

難易度 2/5 1〜3時間初心者へのやさしさ 75/100

mksglu/context-mode#1200 · 2026年9月24日に作成
Duplicated 'Connect to Database Using C#' link in Postgres Tutorial Page オープン

難易度 2/5 1〜3時間初心者へのやさしさ 75/100

neondatabase/website#5944 · 2026年9月24日に作成
bbb-conf --set-port-range writes port values as YAML strings, so mediasoup ignores the configured range オープン

module: core

難易度 2/5 1〜3時間初心者へのやさしさ 75/100

bigbluebutton/bigbluebutton#25849 · 2026年9月24日に作成
[chore]: test(search): Migrate ResultItemTitle unit tests to TypeScript オープン

難易度 2/5 1〜3時間初心者へのやさしさ 75/100

jaegertracing/jaeger-ui#4506 · 2026年9月24日に作成

JavaScript の issue をもっと見る