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

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

转载作者：行者123 更新时间：2023-12-03 05:36:18

25

4

设置如下:

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。然后转到开发人员工具 > 元素选项卡。单击 div，然后单击 div { width: 100px; 的链接； ... } block 。您会发现自己位于第 2 行。但是，当您注释掉 new webpack.optimize.UglifyJsPlugin() 行时，您将位于第 3 行，正如预期的那样。我做错了什么？

最佳答案

首先要提到的是 UglifyJsPlugin switches所有加载程序进入最小化模式。来自 the docs :

Minimize all JavaScript output of chunks. Loaders are switched into minimizing mode.

但值得庆幸的是它在 coming 中进行了更改2.x version .

另一个问题是 libsass 生成 wrong source map ，当 outputStyle 被压缩时。当您不指定时 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。

关于javascript - 如何使 webpack 的 uglifyjs 插件不破坏 sass 的源映射？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40724467/

25

4

0

文章推荐： javascript - window.open() 已处于全屏模式时出现问题

文章推荐： javascript - 如何解决 promise 问题？

文章推荐： javascript - String.endsWith(/[字符串]/[1-999]/)

uglifyjs - 如何使用带有顶级和保留的 uglifyjs 3 mangle 选项？
我有以下命令: uglifyjs main.js bar.js -m toplevel reserved=['$','addTo','exports'] -c --source-map -o
Uglifyjs 覆盖文件
我在尝试覆盖被丑化的文件时遇到问题。不幸的是，我无法输出到不同的文件名。以下是一些尝试: uglifyjs dist/main.*.js --compress drop_console=true -
javascript - UglifyJS:连接和缩小或反之亦然？
我正在编写一个使用许多 JS 文件的应用程序。 Underscore、Backbone、jQuery、 slider 的 jQuery 插件、模型、路由器、集合和 View 的几个文件。在我的开发机
javascript - uglifyjs 压缩但不破坏函数或变量名
我在 2012 年发现了一个有类似问题的帖子，但是它调用 uglifyjs 的方式不同 Uglify-js doesn't mangle variable names 我有一个 Windows 7 环
Grails uglifyjs 插件不起作用
我已将 uglifyjs 插件添加到我的项目中grails install-plugin uglify-js-minified-resources . 还添加了 compile ":uglify-js
javascript - UglifyJS 附加文件而不删除空格
我正在使用 UglifyJS破坏和压缩我的 SPA 的 JavaScript 代码。这对于生产来说没问题，但是我只想在 Debug模式下编译时附加所有 JS 文件。我尝试省略 -c -m 选项(co
javascript - UglifyJs - 缩小的损坏变量在运行时恢复其原始名称
在我的代码库中，我有这个与 fabric.js 交互的自定义代码: export function cropToCircle(object) { let minDim = Math.min
javascript - UglifyJS 压缩
我正在尝试获取一个简单的 UglifyJS (v2.3.6) 示例来处理压缩。具体来说，“未使用”选项，如果从未使用过，变量和函数将被删除。这是我在命令行上的尝试: echo "function
javascript - UglifyJS 改变代码行为
我有以下代码(为方便讨论而简化): var a = 1; var b = []; if (checkIfAisOne(a)) { b = ['something'] } console.log
javascript - UglifyJS 内联脚本而不是文件名
我想知道如何从命令行使用 UglifyJS 压缩内联脚本。所有示例都显示文件名，即 uglifyjs somefile.js -o somefile.min.js 我想做的是: uglifyjs -
javascript - UglifyJS - 如何输出到不同的文件夹？
我正在尝试使用 UglifyJS 来缩小我的代码，但我遇到了一些问题。我有这样的文件结构: /deploy /assets /js ((minified file goes h
javascript - UglifyJS 内存不足
我正在尝试缩小一个 24MB 的 JavaScript 文件，但在大约 10 分钟的运行时间后，脚本退出并显示内存不足的错误。有什么标志可以提供帮助吗？我正在运行具有 16GB 物理内存的 Windo
javascript - UglifyJS 属性重整
根据文档，UglifyJS 可以破坏除提供的保留列表中的所有属性名称。是否有可能以其他方式做到这一点，所以只有提供的列表中的属性才会被破坏？如果是这样，我需要将哪些选项传递给 uglify.mini
uglifyjs - uglify-js和uglify-es有什么区别？
uglify-js和uglify-es的描述是相同的，除了uglify-es大写“for ES6 +”。基于此，人们会认为uglify-es是ES6代码的最佳选择。另一方面，uglify-es较旧-5
Webpack UglifyJS 删除死代码，但不要最小化代码
如何使用 Webpack 和 UglifyJS 删除死代码，但不最小化代码？最佳答案您可能想使用 beautifier options .最低限度的想法: new webpack.optimize
minify - 告诉 UglifyJS 跳过特定的代码区域
有没有办法告诉 UglifyJS 跳过特定的代码部分，也许使用这样的注释: // uglifyjs:skipStart filter = function(item){ /* some crazy f
javascript - 提高压缩比 UglifyJS - NodeJS
目前我可以在 Node 环境中使用 UglifyJS 进行缩小。然而，读完这篇blog ，我意识到这个插件还有更多选项。但我无法将这些关键字转换为 Node 环境可接受的语法。现在，我正在使用 ne
javascript - uglifyjs 抛出带有冒号的 punc()
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
javascript - 防止 UglifyJS 更改函数参数的名称
在测试服务器上部署我的应用程序时，我遇到了一个错误，其中 UglifyJS 确实更改了 npm 依赖模块的函数参数，这些参数的名称很重要；一些函数是动态调用的，我正在使用 function-argum
javascript - Webpack UglifyJS 仍然发出警告消息
A lot of warnings with webpack uglify 我已经关闭了 UglifyJS 中的警告，但我仍然收到来自 webpack 的一些警告。 WARNING in main-0

首页

博学

6Ren·AI

商城

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