1

我的主 javascript 文件中有一个变量，例如var example = {};.

在 webpack 完成它的工作后，我发现它example现在被引用为t. 当我在整个 Web 项目中使用该变量时，这给我带来了一个问题。我将函数绑定到对象上，例如：

var example = {};
example.initialise = function () {};

最后在页面底部，我可以调用这部分脚本，例如：

<script>example.initialise()</script>

这种编写javascript函数的方式并不罕见......

这显然是一个巨大的痛苦，因为我无法控制缩小。此外，似乎 webpack 并没有弄清楚这example.initialise = function () {};与其新缩小的var example (becoming)--> var t. 即它也不会变成t.initialise = function {};。

我应该在这里做什么？

我也尝试过使用汇总。发生相同类型的变量缩小。

问题是，这种缩小/混淆非常棒，特别是在函数的内部工作中，几乎不需要担心参数名称。但不在顶层。我不明白为什么会发生这种情况，或者如何防止它。

有任何想法吗？

我假设有一些方法可以设置 webpack 的配置。例如 inside webpack.config.js，但是我对 webpack 文档的仔细阅读让我很难理解我可以使用哪些选项来解决这个问题，比如以某种方式防止属性缩小。

4

2 回答 2

1

原来我一直很傻。我发现您可以通过将顶级属性绑定到window...来防止其被缩小，事后看来，这是我一直都知道的事情，并且愚蠢地没有早点意识到这一点。哦！

var example = {};因此，需要做window.app.example = {};的就是将所有顶级属性更改app为有助于命名空间并防止和覆盖语言本身设置的任何内容。

于 2017-02-24T10:32:37.640 回答
1

在 laravel-elixir-webpack-official 代码中，您可以看到这里minify()被应用，使用 UglifyJS2 并且默认开启 mangling。minify()

Mangling 是一种优化，它通常将局部变量和函数的名称减少为单个字母（这解释了您的example对象被重命名为t）。请参阅此处的文档。

我看不出有任何方法可以自定义minify()laravel-elixir-webpack 中的行为，所以现在你可能需要WebpackTask.prototype.gulpTask在使用模块之前修改补丁方法（不是一个理想的解决方案）。请参阅我正在评论的行。

const WebpackTask = require('laravel-elixir-webpack-official/dist/WebpackTask').default;

WebpackTask.prototype.gulpTask = function () {
    return (
        gulp
        .src(this.src.path)
        .pipe(this.webpack())
        .on('error', this.onError())
        // .pipe(jsFiles)
        // .pipe(this.minify()) 
        // .on('error', this.onError()) 
        // .pipe(jsFiles.restore)
        .pipe(this.saveAs(gulp))
        .pipe(this.onSuccess())
    );
};
于 2017-02-23T16:00:55.120 回答