有没有办法用 webpack 指定多个带有静态资产的公共目录？

Question

我有一个 Vue 项目，它具有从 Vue CLI 生成的标准 webpack 配置。这给出了项目目录结构，例如：

public\
  css\
  images\
  index.html
src\
tests\
package.json
etc...

所以默认的静态资产目录是项目目录根目录下的public\。现在我想指定另一个静态目录（它将位于src\ 中的某处），以便在构建时合并这两个目录的内容。如果文件冲突，src\ 中的文件应该覆盖public\ 中的文件。

如何使用 webpack 做到这一点？

我需要这个的原因是因为我想为不同的客户制作单独的版本。每个客户都将拥有自己的特定资产和组件，我计划将它们放在src\ 的某个位置。例如：

public\             // shared static assets
src\
   components\      // shared stuff for all customers
   store\
   ...etc        

   customer1\       // customer1 specific stuff below this level
      public\       // merge these with shared static assets and overwrite if necessary
      components\
      store\
      index.js

   customer2\       // customer2 specific stuff below this level
      public\
      components\
      store\
      index.js

因此，当我运行 npm run build --customer=customer1 时，我只想在捆绑包中获取 shared + customer1 的东西。我几乎通过webpack alias config 为客户的组件、商店和其他非静态内容解决了这个问题，我想知道如何为public 目录中的静态资产做到这一点？

Answer 1

这不是 Webpack 的工作方式。当你编译你的应用程序时，Webpack 做的第一件事就是扫描你的代码并构建一个依赖树。实际上，依赖关系可以是很多东西，但可以将它们视为您的“导入文件”。

扫描从您的入口点开始，通常是src/index.js，然后从那里递归进行。我想明确的是，只有“显式”依赖被捆绑，其他任何东西都将被忽略。换句话说，如果你不导入某些东西并且有一个特定的加载器，那么该资产将不会被捆绑。

同样，Webpack 不会扫描您的src 目录，而是从其入口点遍历您的应用程序。

还要考虑到，通过良好的设置（如 Create React App 中包含的设置），几乎每个资产都将转换为 JS 模块并合并为具有特定命名约定的块，以允许缓存失效。也就是说，名字冲突的可能性很小。

鉴于您的情况，我非常、非常、非常、非常强烈地建议您为每个不同的客户使用不同的存储库。如果您需要重用组件，请编写一个库。如果您需要重用资产，请对其进行优化并将其托管在 CDN 上。我预计您的方法会出现安全性、可维护性和可扩展性问题。

最后，如果您坚持，一种可行的方法是将自定义插件附加到您的 src 目录中的那些“静态”目录（如果已经有可用的，您可以四处搜索，如果没有，请参阅自定义插件在 Webpack 文档中，它并不是那么简单）。该插件基本上会根据环境变量或传递的选项更改导入文件的路径。

如果我忽略了某些东西，请告诉我，但我真的认为你应该将项目分开，即使“基础”是相同的。

最后一点：您的方法可能会破坏任何静态分析（忘记 TypeScript、Flow、JSDocs、IDE 自动完成和提示等）。您还将打破模块化编程范式。这尤其适用于组件。对于图像等其他媒体资产，限制会更少，但仍然会遇到问题。您的应用程序将如何在开发模式下运行？充其量你会遇到性能问题。您可以破坏 HMR（热模块更换）、应用程序测试......我会在这里停下来。