Laravel Webpack - 顶级变量的不需要的缩小

Question

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

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

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

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

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

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

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

我应该在这里做什么？

我也尝试过使用汇总。同样的变量缩小也会发生。

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

有什么想法吗？

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

Answer 1

在 laravel-elixir-webpack-official 代码中，您可以看到正在应用 minify() here , minify() 使用 UglifyJS2 并且默认启用重整。

Mangling 是一种优化，可将局部变量和函数的名称通常减少为单字母(这解释了您的 example 对象被重命名为 t)。 See the doc here.

我没有看到任何可以在 laravel-elixir-webpack 中自定义 minify() 行为的方法，因此现在您可能必须猴子修补 WebpackTask.prototype.gulpTask使用模块之前的 code> 方法(不是理想的解决方案)。请参阅我注释掉的行。

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())
    );
};