webpack根据chunk加载不同的模块

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

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

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

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

现在我想重用一些模块，但有些我想覆盖它。所以默认情况下它应该加载index.js，但是如果上下文isMobile并在旁边index.js a mobile.js文件存在，它应该加载mobile变体。

components/
  Button/
    index.js
    mobile.js

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

我找不到任何可以用来解决这个问题的东西，有什么想法吗？

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

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

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

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://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://blog.jscrambler.com/how-to-make-your-app-faster-with-webpack-dynamic-imports/

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