Question

我一直在寻找答案，我似乎无法找到答案。

这是一个简单（似乎）的问题。我希望能够按照它们出现的顺序合并.js文件，即如果我在index.js（JSX）中有这个，我希望它们按列出的顺序加载： -

require('script1.js');
require('script2.js');
require('script3.js');

然而，无论我尝试什么，webpack似乎只是按照它想要的顺序加载它们。这个显而易见的例子是我可以首先加载jQuery以向前面的脚本公开$。但是，我想知道如何在我构建一个相当复杂的应用程序时这样做。

我希望以前没有回答过这个问题而我已经错过了......这让我感到很紧张。我习惯与Gulp SASS合作，这非常容易。

如果它有任何区别，我将其与ReactJS / ReactDOM一起使用。

Answer 1

这是对require（以及Webpack也部分支持的ES2015＆＃39; s import）如何运作的基本误解。

require / import不是手动维护脚本的顺序，而是让您不必对脚本顺序进行手动维护。

相反，每个脚本（模块）通过require / import声明其依赖项，然后环境（Webpack，在您的情况下）计算出依赖关系图并确保文件加载到正确的顺序（在真实import的情况下，在活动绑定周围做一些聪明的事情）。

您的jQuery示例将如下所示：您需要jQuery的任何脚本（模块）都会这样做：

var $ = require("jquery");

或

import $ from "jquery";

或类似。

这使得jQuery的主要功能在该模块中可用作$。它还告诉Webpack该模块需要jQuery。因此，它以正确的顺序加载脚本以实现这一目标。