如何使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的鏈接div { width: 100px; ... } div { width: 100px; ... }塊。 並且您會發現自己在第2行上。但是，當注釋掉new webpack.optimize.UglifyJsPlugin()行時，您將排在第3行，這與預期的一樣。 我究竟做錯了什么？

Answer 1

首先要提到的是UglifyJsPlugin 將所有加載程序切換到最小化模式。 從文檔：

最小化所有JavaScript塊的輸出。 裝載機切換到最小化模式。

但是幸運的是，它在即將發布的 2.x版本中進行了更改。

另一個問題是，在compressed outputStyle時， libsass生成錯誤的源映射。 而outputStyle被壓縮，當你不指定它明確地縮小時開啟。

因此，目前的解決方法是指定某些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 。

如何使webpack的uglifyjs插件不破壞sass的源映射？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-11-21 17:47:37

如何使webpack的uglifyjs插件不破壞sass的源映射？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-11-21 17:47:37

解決方案1
1 已采納 2016-11-21 17:47:37