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

Question

Here's the setup: 设置如下：

package.json : 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 : 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 : template.ejs ：

<!doctype html>
<html>
<body>

<div></div>

</body>
</html>

1.js : 1.js ：

require('./1.sass');

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. 然后在Chrome中打开http://example.com/dist 。 Then go to Developer Tools > Elements tab . 然后转到Developer Tools > Elements tab 。 Click on the div , and then on the link for div { width: 100px; ... } 点击div ，然后点击div的链接div { width: 100px; ... } div { width: 100px; ... } block. div { width: 100px; ... }块。 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. 并且您会发现自己在第2行上。但是，当注释掉new webpack.optimize.UglifyJsPlugin()行时，您将排在第3行，这与预期的一样。 What am I doing wrong? 我究竟做错了什么？

Answer 1

First thing to mention is that UglifyJsPlugin switches all loaders into minimizing mode. 首先要提到的是UglifyJsPlugin 将所有加载程序切换到最小化模式。 From the docs : 从文档：

Minimize all JavaScript output of chunks. 最小化所有JavaScript块的输出。 Loaders are switched into minimizing mode. 装载机切换到最小化模式。

But thankfully it was changed in the coming 2.x version . 但是幸运的是，它在即将发布的 2.x版本中进行了更改。

The other issue is that libsass generates wrong source map , when outputStyle is compressed . 另一个问题是，在compressed outputStyle时， libsass生成错误的源映射。 And outputStyle is compressed, when you don't specify it explicitly and minification is turned on. 而outputStyle被压缩，当你不指定它明确地缩小时开启。

So, for now the workaround is to specify some outputStyle other than compressed : 因此，目前的解决方法是指定某些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 It seems there are also issues with most likely source-map package and css-loader package. UPD似乎最有可能的source-map软件包和css-loader软件包也存在问题。 So you might consider disabling minification, like in: css?sourceMap&-minimize . 因此，您可以考虑禁用缩小功能，例如： 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