我到目前为止所考虑的

Question

我正在使用遗留项目，并尝试将其转换为现代webpack项目，对原始遗留文件的更改最少。

问题在于，许多遗留文件都依赖于彼此的全局变量，例如：

legacy1.js

console.log("Legacy1");
function globalMess() {
  console.log("I am doing global mess!")
}

legacy2.js

console.log("Legacy2");
globalMess();%

想法解决方案将是：

允许所有遗留文件使用彼此的全局变量而不用我搜索每个全局变量。
全局变量只对遗留文件是全局的，而不是泄漏到真正的全局范围。
允许我在生成的旧文件上使用Webpack的缓存清除哈希值。因此，如果我在遗留文件中修复一个错误，生成的文件将有一个新的散列（例如 legacy1.abc.js ）。
使用 HtmlWebpackPlugin 之类的内容自动将生成的文件添加到index.html。

我到目前为止所考虑的

这些是我考虑过的解决方案：

解决方案1 

只需将它们手动注入index.html，其顺序与它们在原始项目中的显示顺序相同。这个解决方案没有缓存破坏，会泄漏全局。

解决方案2

使用 ExposeLoader / ProvidePlugin 。那些需要我知道每个库暴露的每个全局。这对我来说没有意义，因为我有20个遗留文件，每个都暴露了一些随机函数，我不知道哪些暴露了什么。

解决方案3

使用 webpack-raw-bundler 。它汇总了文件，非常像我想要的。但是，它不支持通过哈希缓存或自动将其自身添加到index.html。

理想的解决方案

因此，我认为理想的解决方案是一个webpack插件，它将所有遗留文件整合在一起，将它们全部捆绑在一个单独的文件中，并生成一个带散列的文件。该文件也将使用 HtmlWebpackPlugin 的逻辑注入index.html。

它的用法看起来像那样：

new LegacyBundlePlugin({
  uglify: false,
  sourceMap: false,
  name: "legacy",
  fileName: "[name].[hash:8].js",
  filesToConcat: ["./legacy1.js", "./legacy2.js"],
}),

哪会产生以下结果：

(function () {

  console.log("Legacy1");
  function globalMess() {
    console.log("I am doing global mess!")
  }

  console.log("Legacy2");
  globalMess();

})();

Answer 1

目前我找到的最佳解决方案是使用 webpack-concat-plugin 。

它将所有内容捆绑到一个文件中，允许我使用缓存清除并通过 HtmlWebpackPlugin 将其自身添加到生成的html中。

它唯一不做的就是不泄漏到全局范围，因为它只是简化所提供的文件并且不会将它们放入任何范围。

Webpack - 捆绑依赖于彼此全局变量的旧文件

我到目前为止所考虑的

理想的解决方案

1 个答案: