x-yuri x-yuri - 7 days ago 8
Javascript Question

How to make webpack's uglifyjs plugin not break sass's source maps?

Here's the setup:

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 webpack = require('webpack');
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: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')},
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'template.ejs',
}),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.UglifyJsPlugin(),
],
devtool: 'source-map',
};


template.ejs
:

<!doctype html>
<html>
<body>

<div></div>

</body>
</html>


1.js
:

require('./1.sass');


1.sass
:

body
background: #ddd
div
width: 100px
height: 100px
margin: auto
background: #333


Then

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


And open
http://example.com/dist
in Chrome. Then go to
Developer Tools
>
Elements tab
. Click on the
div
, and then on the link for
div { width: 100px; ... }
block. And you'll find yourself on line 2. But when you comment out the
new webpack.optimize.UglifyJsPlugin()
line, you'll be at line 3, as expected. What am I doing wrong?

Answer

First thing to mention is that UglifyJsPlugin switches all loaders into minimizing mode. From the docs:

Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode.

But thankfully it was changed in the coming 2.x version.

The other issue is that libsass generates wrong source map, when outputStyle is compressed. And outputStyle is compressed, when you don't specify it explicitly and minification is turned on.

So, for now the workaround is to specify some outputStyle other than compressed:

var webpack = require('webpack');
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: /\.sass$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap')},
        ]
    },
    sassLoader: {
        outputStyle: 'nested',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'template.ejs',
        }),
        new ExtractTextPlugin('[name].css'),
        new webpack.optimize.UglifyJsPlugin(),
    ],
    devtool: 'source-map',
};

UPD It seems there are also issues with most likely source-map package and css-loader or file-loader packages. So you might consider disabling minification: css?sourceMap&-minimize.

Comments