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

【问题标题】：How to make webpack's uglifyjs plugin not break sass's source maps?如何让 webpack 的 uglifyjs 插件不破坏 sass 的源映射？
【发布时间】：2016-11-21 16:08:03
【问题描述】：

设置如下：

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; ... } 块的链接。您会发现自己在第 2 行。但是当您注释掉 new webpack.optimize.UglifyJsPlugin() 行时，您将在第 3 行，正如预期的那样。我做错了什么？

【问题讨论】：

标签： javascript webpack minify source-maps uglifyjs

【解决方案1】：

首先要提到的是UglifyJsPlugin switches 所有加载器都进入了最小化模式。来自the docs：

最小化块的所有 JavaScript 输出。 加载器切换到最小化模式。

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

另一个问题是libsass 生成wrong source map，而outputStyle 是compressed。并且outputStyle 被压缩，当你不指定它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 包和css-loader 包也存在问题。因此，您可能会考虑禁用缩小功能，例如：css?sourceMap&-minimize。

【讨论】：