Question

我们部署了几个带有纯html和js的应用程序。这些应用程序应该是完全独立的模块，而不会影响已部署的其他应用程序。

但是，如果情况需要由业务动态决定，我们应该能够从一个应用程序加载到另一个应用程序。我们可以通过简单地给出相对路径来加载不同的应用程序屏幕，因为以前没有依赖项捆绑。

现在，我们正在将它们转换为使用webpack作为捆绑程序来响应应用程序。如果要动态地需要一些东西，在这里我们必须使用动态导入。这也适用于应该在构建时给出的模式。那么有什么方法可以使用webpack捆绑器实现这种动态模式吗？

对于导入屏幕组件，代码如下所示，

Promise.all(reqList.map(modulePath => 
{
    return import(/* webpackMode: "lazy-once" */`../../../${modulePath}.jsx`)
})).then(modules => {doStuff()})

由于它们都是并行部署的应用程序，因此我们尝试返回3个文件夹（即，tomcat中的webapps之类的根文件夹）并访问其他应用程序路径，这些路径将在modulePath变量中动态派生。因此，在导入时，webpack尝试从首次启动应用程序时已加载的块中导入。但是，此加载的块还没有其他应用程序的屏幕。

我们尝试将每个jsx文件作为创建独立文件的webpack的入口点，但是如果我们将它们作为入口文件，则应将它们手动附加到index.html上，这将停止在jsx中导出工作。 / p>

我的wepack配置如下所示，

function getEntries(pattern) {
  const entries = {};

  glob.sync(pattern).forEach((file) => {
    let fileName = file.substr(0,file.indexOf("."));
    entries[fileName.replace('src/', '')] = path.join(__dirname, file);
  });

  return entries;
}
let jsxFiles = getEntries('src/**/*.jsx');
console.log(Object.keys(jsxFiles));
module.exports = {
  entry: jsxFiles,
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    chunkFilename: "AppId"+'.js'
  }
}

第一个应用程序加载良好，因为webpack能够找到捆绑的块，但是当我们尝试加载不同的应用程序屏幕组件时，动态导入失败，提示未找到模块。

有什么方法可以实现这种动态导入？

感谢您经过这么长的篇幅，我别无选择，只能解释一下..：）

Answer 1

本质上，您正在寻找动态模块加载。您需要分别webpack每个模块。

要加载它们，您有几个选择

使用浏览器的本机import()，但使用IE，Edge和Firefox don't support it
使用模块加载器库
1. SystemJS
2. RequireJS，尽管它已经很老了

如果要使用模块加载器，则需要将模块webpack System.register或AMD格式化

如何捆绑反应动态需要的组件？

1 个答案: