如何讓webpack的uglifyjs插件不會破壞sass的源地圖？

這裏的設置：如何讓webpack的uglifyjs插件不會破壞sass的源地圖？

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; ... }塊的鏈接。你會發現自己在第二行。但是當你註釋掉new webpack.optimize.UglifyJsPlugin()行時，你會像預期的那樣在第3行。我究竟做錯了什麼？

來源

2016-11-21 x-yuri

首先要提的是，所有的裝載機都採用最小化模式。從the docs：

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

所幸它在coming 2.x version改變。

另一個問題是libsass生成wrong source map，當outputStyle是compressed。並且outputStyle被壓縮，當你沒有指定它explicitly並縮小打開。

所以，對於現在的解決辦法是比compressed指定一些outputStyle其他：

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。

來源

2016-11-21 17:47:37

如何讓webpack的uglifyjs插件不會破壞sass的源地圖？

回答

相關問題