Question

我使用默认配置运行npm install后，通过默认的laravel设置使用webpack。

在webpack.mix.js中，我有以下内容：

mix.js('resources/assets/js/init.js', 'public/js');

resources/assets/js/init.js包含以下内容：

(function ($) {
    $(function () {
        $('.button-collapse').sideNav();
    }); // end of document ready
})(jQuery);

为什么webpack会为此文件发出超过10,000行？！：

这是gist中的输出。

我是否完全误解了webpack，或者laravel或webpack默认搞砸了？我希望基本上是JS的副本，因为npm run dev不应该缩小，并且它没有任何ES6语法......那么这是什么？如果我将相应的行添加到混合中，同样的事情可以很好地将scss编译为css。

Answer 1

简答

我最好能从你给出的代码中得知 - 是的，那是对的。

长答案

webpack不会只是将您的应用程序编译到ES5。相反，设计的目的是将每个依赖关系打包在一个文件中，以便最终用户下载单个JS文件。

在原始文件中，我假设您在某些时候使用require或其他方法定义jQuery。（我不熟悉mix，但我认为在某些时候必须定义jQuery。）当你使用require('jquery')时，webpack将其转换为所有jQuery源代码 - 这几乎可能是所有的10,000行代码来自。

我们在webpack包的最末端看到您的原始代码，从第10,302行开始：

/* WEBPACK VAR INJECTION */(function(jQuery) {(function ($) {
    $(function () {
        $('.button-collapse').sideNav();
    }); // end of document ready
})(jQuery);
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))

正如您所看到的，它基本上就是您所编写的内容，但现在它使用前10,000行代码定义了jQuery。这样，它就不会引用任何外部文件。

拆分您的代码

如果您不希望您的webpack包在顶部有一堆jQuery，您可以将代码拆分为供应商和应用程序文件。根据{{3}}，这样做是这样的：

mix.js('resources/assets/js/init.js', 'public/js')
  .extract(['jquery'])

然后，你的包将输出三个文件而不是一个 - 一个包含webpack清单的文件，一个包含所有库的文件（在本例中为jQuery），以及一个包含主应用程序代码的文件（五行）你在resources/assets/js/init.js）中写道。

为什么webpack会吐出10,000多条线？

1 个答案:

简答

长答案

拆分您的代码