Webpack基于块加载不同的模块

Question

是否可以使Webpack根据一些上下文信息加载另一个模块？

例如，我有两个版本的React应用程序：桌面版和移动版

在我的index.js中，我决定要加载哪个应用程序：

if (isMobile()) {
   loadMobile().then(({default: App}) => render(App))
}

现在，我想重用某些模块，但是有些我想覆盖它。因此，默认情况下，它应该加载index.js，但是如果上下文isMobile和index.js旁边有一个mobile.js文件，那么它应该加载mobile变体。

components/
  Button/
    index.js
    mobile.js

在移动环境中，webpack应该加载mobile.js而不是index.js

我找不到可以用来解决问题的任何东西，有什么主意吗？

---

PS：我已经在github上创建了一个问题，它也演示了该问题以及我想进一步实现的目标：

https://github.com/webpack/enhanced-resolve/issues/180

Answer 1

您可以使用动态加载功能和动态导入语法来解决此问题。

1. 安装Babel插件plugin-syntax-dynamic-import：

   npm install --save-dev @babel/plugin-syntax-dynamic-import
   

   并在.babelrc

   中使用它

   {
     "plugins": ["@babel/plugin-syntax-dynamic-import"]
   }
   

2. 您需要使用以下内容创建名为load的组件 代码：

       export default const load = (platform="index") => componentName => 
       import(`components/${componentName}/${platform}.js`);
   

3. 然后使用具有以下加载功能的动态导入 代码：

       const { Button } = await import("components/Loader.jsx").then(load => {
         load(${platform})(${componentName})
       })
   

这些文章可以为您提供帮助：

• https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234

• https://blog.jscrambler.com/how-to-make-your-app-faster-with-webpack-dynamic-imports/

• https://webpack.js.org/guides/code-splitting/#dynamic-imports

Answer 2

有两种方法可以实现这一目标。

1. 为移动设备和台式机分别创建2个入口点1个，以便webpack生成2个捆绑包。您只能从html加载所需的包。
2. 如果您require/import Webpack中的移动代码自动将代码分成2个捆绑包。仅在必要时才加载移动捆绑软件。

Answer 3

我想您必须创建两个构建：一个具有默认resolve.mainFiles的构建，另一个与

resolve: {
    mainFiles: ['mobile', 'index']
}

您将需要确定要在html中加载哪个包。或创建两个不同的html文件，并将isMobile逻辑移至Web服务器配置，以便它决定将哪个html返回给用户。

两个构建之间的某些块可能相同。但是很有可能最终会得到两个不同的应用程序。您可以使用DllPlugin减少两个应用之间的内置代码重复。