如何使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