为什么webpack吐出10000多行？

在使用默认configuration运行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会为这个文件发出高达10000多行？！：

这是输出的要点 。

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

Answer 1

简答

我可以从你给出的代码中看出最好的结果 – 是的，没错。

长答案

什么webpack不只是编译你的应用程序到ES5。 相反，devise要做的是将每个依赖关系打包在一个文件中，以便最终用户下载一个JS文件。

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

我们在10302行的webpack软件包的最后看到您的原始代码：

 /* 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，你可以把你的代码分割成供应商和应用程序文件。 根据laravel文档 ，这是这样做的：

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

然后，你的bundle将输出三个文件，而不是一个 – 包含webpack清单的文件，一个包含所有库的文件（如本例中的jQuery）和一个包含主应用程序代码的文件resources/assets/js/init.js ）。