javascript - 将文件合并到 Webpack 的条目中

Question

背景:

我的任务是将使用多种构建工具的 JS 库转换为仅使用 Webpack 的库，最终我们将重构代码以使用 es6 类。

目前这个库已经有 10 多年的历史了，它由多个相互连接的文件组成，这些文件可以相互交互/相互依赖(意大利面条代码丰富!)。将所有 block 合并后成为一个 IIFE 文件，该文件添加了对窗口对象的特定调用。

就目前而言，我们让 Grunt 将所有文件连接在一起，然后我们通过 uglify 运行它。

我“排序”复制我们用 Grunt 所做的事情的唯一方法是使用脚本加载器。

script-loader 的问题在于它会在全局范围内公开所有内容，并且由于我正在处理的库包含多个相互依赖的 block ，因此这还不够。

问题:

在 webpack 中有没有一种方法可以将多个文件( block )连接成一个文件？

例如:

• chunkA.js

  var varFromChunkA = "hello";
  function methodFromA(){}
  

• chunkB.js

  console.log(varFromChunkA);
  methodFromB();
  

• entry.js

  console.log(varFromChunkA + ' World');
  methodFromA();
  methodFromB();
  

最终，我希望 entry.js 的输出能够访问来自 chunkA 和 B 等的变量/方法，而无需模块。 (整个库被分成基于代码的命名空间，根本没有模块)。

所以结合上面的 block ，我希望 webpack 输出如下内容:

var varFromChunkA = "hello";
function methodFromA(){}

console.log(varFromChunkA);
methodFromB();

/***Webpack Code***/
//Entry.js file
//I can access the objects / methods defined above
console.log(varFromChunkA +' World from inside entry.js');
/*** End of Webpack Code **/

加载 js 时在浏览器控制台中，我希望:

Hello

Hello World

Hello World from inside entry.js

这可能吗？

本质上，我希望 Webpack 的输出包含一些纯 JS，webpack 生成的任何 JS 文件都可以访问它们...

尝试使用 script-loader 和 concat 插件，但没有成功。

我正在使用 Webpack 4

Answer 1

到目前为止，我解决它的方法是对需要全局公开的文件部分使用脚本加载器。其余的我正在使用节点脚本将它们全部连接在一起。

然后将所有文件的组合传递给 webpack。

我很想只用 webpack 来做所有这些，但我认为这是一个令人愉快的妥协，意味着我可以摆脱 grunt。