Fatal编程技术网
  • webpack/
  • Webpack 每个输入模块的网页包解析别名规则

Webpack 每个输入模块的网页包解析别名规则

webpack

Webpack 每个输入模块的网页包解析别名规则,webpack,Webpack,这里有一个很长的。尽管我对答案或解决方案没有太多期望（或任何期望），但我仍然觉得分享/发泄是一个有趣的问题 我所拥有的 我有一个有2个入口点的应用程序。它们都导入相同的文件，main.ts，该文件依次导入把手模板main.hbs： entry1.ts └ main.ts ├ main.hbs └ … entry2.ts └ main.ts ├ main.hbs └ … main.ts还导入其他ts类（数千个），这些ts类导入其他HBS模板（数百个），但几乎所有这些都在两个条目之

这里有一个很长的。尽管我对答案或解决方案没有太多期望（或任何期望），但我仍然觉得分享/发泄是一个有趣的问题

我所拥有的 我有一个有2个入口点的应用程序。它们都导入相同的文件，
main.ts
，该文件依次导入把手模板
main.hbs
：

entry1.ts
└ main.ts
  ├ main.hbs
  └ …
entry2.ts
└ main.ts
  ├ main.hbs
  └ …

main.ts
还导入其他ts类（数千个），这些ts类导入其他HBS模板（数百个），但几乎所有这些都在两个条目之间共享。这些条目只是通过一些特定于条目的选项从
Main.ts
调用主类

我需要什么 我被要求为HBS模板创建一个特定于条目的“变体”，以便
entry1
将加载
main.v1.HBS
，
entry2
将加载
main.v2.HBS
，如果存在这样的文件。如果任何其他导入的
.ts
文件导入任何其他
.hbs
文件，它们还将返回相应的
*.v1.hbs
/
*.v2.hbs
变体

因为我希望它尽可能自动化，并且对实际源代码的更改尽可能少，所以我决定采用Webpack“重定向”导入：

  • entry1.ts
    imports
    main.ts
    imports
    main.hbs
    实际加载的
    main.v1.hbs
    • 该
      main.ts
      导入实际加载
      menu.v1.hbs的
      menu.ts
    • 等等
  • entry2.ts
    imports
    main.ts
    imports
    main.hbs
    实际加载的
    main.v2.hbs
    • 该
      main.ts
      导入实际加载
      menu.v2.hbs的
      menu.ts
    • 等等
我认为这种方法会给我带来很多好处：

  • 不必更改所需文件中的源代码（实际上有数百个）

    如果我不在乎这一点，我可以使用一个，然后使用树震动，只留下每个条目中使用的模板。然而

    • 这将增加编译时间和复杂性
    • 如果不能正确地进行树抖动，并且必须将所有变量存储在一个包中，这样我才能在运行时访问正确的变量，那么可以大大增加包的大小（eww）
    • 我这个整洁的怪胎不太热衷于处理更多的东西，只是为了把它们扔掉
    • 该方法似乎只适用于
      require（）
      语法，而不适用于ES样式的静态
      import
      ——因此不支持向前兼容
  • 可以在“重定向”之前检查变量文件是否存在，如果不存在，则返回默认文件。

    重要的是，这允许我以增量方式进行转换，因为创建了更多新“v2”变体的文件，而无需保留静态列表，其中包含哪些导入映射到哪些文件或其他内容

  • 可能在一次编译运行中完成此转换。

    如果我不关心这个问题，我可以单独编译每个条目，在每次运行时设置适当的选项。但是，该应用程序相当大，构建需要几分钟，甚至需要增加节点内存限制。正因为如此，以顺序或并行方式分别构建每个条目并不太好，尽管如果其他方法都不起作用，这是我最后的选择。无论如何，考虑到Webpack的功能，我觉得这是我应该能够在单个构建中完成的事情

    • 我试过的 这是一个内置于Webpack中的插件，乍一看它似乎满足了我的需求：拦截对特定模块的
    require
    调用，并将它们更改为其他模块，它甚至还支持正则表达式和谓词函数。但是，我很快就放弃了这一点，因为映射在编译期间无法更改。这意味着我不能对每个条目有不同的替换规则

    现在我们深陷战壕。我想，为什么不写我自己的加载器来解决这个问题呢？读取其根条目的加载程序，因此理论上我应该能够使用该信息，而不是
    main.hbs
    为
    entry1
    加载
    main.v1.hbs
    ，为
    entry2
    加载
    main.v2.hbs

    虽然最初这似乎是可行的（尽管我讨厌这种方法的非无状态性），但我发现Webpack似乎在第一次缓存require/resolution th1e时：在处理
    main.ts
    时。因此，即使使用我所有的逻辑，我的加载程序在每个文件中只调用一次，而不是在每个
    require
    中调用一次，我也无法实现我想要的

    我研究了告诉Webpack“不要缓存这个，下次再读一遍”的方法，我没有运气。由于两个条目只导入一次
    main.ts
    ，而导入
    main.hbs
    ，因此Webpack将ts和hbs分别视为一个模块，而不管它们是否导入到多个条目文件中。我想这是一个必须的优化，但我没有找到我的出路，为这个具体的情况

    由于加载程序无法满足我的需要，我尝试编写一个插件。我浏览了详细的文档，并尝试连接到
    编译器
    和
    编译
    ，但没有走得太远。我浏览了
    NormalModuleReplacementPlugin
    ，并以同样的方式连接到
    NormalModuleFactory
    （文档似乎没有涵盖它）。最终，我或多或少地在插件系统中重新实现了我以前尝试的加载程序的功能，方法是更改对适当资源的请求，以包含每个条目的“变体”——这正是我所需要的。然而，遗憾的是，我遇到了与加载程序相同的障碍——文件（和我的代码）只被访问一次。