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. 如果您使用 webpackrequire/import中的 Mobile 代码，loadMobile()则会自动将代码分成 2 个包。仅在必要时才加载移动捆绑包。