Description
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/webpackWith 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:
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:
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