Webpack - 如何按特定顺序合并/加载.js文件?



我一直在到处寻找这个问题的答案,但我似乎找不到。

这是一个简单(似乎(的问题。我希望能够按照.js文件的出现顺序合并它们,即如果我的索引中有它.js (JSX(,我希望它们按列出的顺序加载:-

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

但是,无论我尝试什么,webpack 似乎都只是以它想要的任何顺序加载它们。一个明显的例子是,我可以先加载 jQuery 以向前面的脚本公开 $。但是,我只是想知道一般如何做到这一点,因为我正在构建一个相当复杂的应用程序。

我希望这以前没有在某个地方得到答案,我错过了它......这让我发疯了。我习惯于使用Gulp SASS,这要容易得多。

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

这是对require(以及 ES2015 的import,Webpack 也部分支持(工作方式的根本误解。

require/import的要点不是手动维护脚本的顺序,而是让您不必手动维护脚本顺序。

相反,每个脚本(模块(通过require/import声明其依赖项,然后环境(在您的情况下为 Webpack(计算出依赖关系图并确保文件以正确的顺序加载(在 trueimport的情况下,围绕实时绑定做了一些聪明的事情(。

你的jQuery示例将像这样工作:任何需要jQuery的脚本(模块(都是这样做的:

var $ = require("jquery");

import $ from "jquery";

或类似。

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

更多内容在 Webpack 简介中。

最新更新