Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

source-map omits some mappings when regenerating source map

Đang mở
  • Có gì không ổn?
#252 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, webpack
Lĩnh vực
tooling

Hướng nghiên cứu

Bắt đầu với kho lưu trữ tái hiện Webpack 3, package.json, webpack.config.js và 1.scss được cung cấp, sau đó chạy các lệnh npm và webpack đã được ghi lại. Truy vết sourceAndMap() trong webpack-sources đến package source-map và so sánh các mappings được ghi nhật ký với các mục mong đợi; được xem là hoàn tất khi các mappings được tái hiện được giữ lại hoặc nguyên nhân được ghi lại bằng một regression test.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
JavaScript
Star
3.7k
Fork
370
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của mozilla/source-map

Tất cả issue của mozilla/source-map

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.