如何让 webpack 的 uglifyjs 插件不破坏 sass 的源映射？

Question

设置如下：

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

然后

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

并在Chrome中打开http://example.com/dist。然后转到 Developer Tools > Elements tab。单击 div，然后单击 div { width: 100px; ... } 块的 link。你会发现自己在第 2 行。但是当你注释掉 new webpack.optimize.UglifyJsPlugin() 行时，你会像预期的那样在第 3 行。我做错了什么？

Answer 1

首先要提到的是 UglifyJsPlugin switches all loaders into minimizing mode. From the docs:

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

但幸运的是它在 coming 2.x version 中被更改了。

另一个问题是 libsass 生成 wrong source map, when outputStyle is compressed. And outputStyle is compressed, when you don't specify it explicitly 并且打开了缩小。

因此，目前的解决方法是指定一些 outputStyle 而不是 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 似乎 source-map package and css-loader 软件包也存在问题。因此，您可能会考虑禁用缩小，例如：css?sourceMap&-minimize.

如何让 webpack 的 uglifyjs 插件不破坏 sass 的源映射？

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

javascript

webpack

minify

source-maps

uglifyjs