webpack - Webpack动态加载组件路径正确但菜单页找不到，如何解决？

Question

某个菜单页找不到，但是存放的路径也是对的，网上说webpack的写法问题
但是写法都是符合的

 component(resolve) {
            // 判断是否为首路由
            if (first) {
              require(['../page/index'], resolve)
              return
              // 判断是否为多层路由
            } else if (isChild && !first) {
              require(['../page/index/layout'], resolve)
              return
              // 判断是否为最终的页面视图
            } else {
              require([`../${component}.vue`], resolve)
            }
          },

到底什么原因

webpack的写法修改过，发现没问题

Answer 1

在Webpack中处理动态加载组件时，使用require.ensure或者ES6的import()函数是更常见且推荐的方式，因为require直接用在异步组件加载中可能不会按预期工作，特别是在Webpack的某些配置下。require在Webpack中通常被处理为同步导入，而Webpack的代码分割（code splitting）功能依赖于异步导入。

在你的代码中，你使用了require函数结合回调函数来实现动态加载，但这种方式可能不会触发Webpack的代码分割。此外，你的代码中还存在return语句在require调用之后，这会导致require调用之后的代码永远不会被执行，这可能不是你想要的行为。

推荐解决方案

1. 使用import()代替require：
   使用import()来动态加载组件，这样可以确保Webpack能够正确地处理代码分割。

   component: () => import(`../${component}.vue`)

或者，如果你需要根据条件动态加载不同的组件，可以这样写：

component: () => {
  if (first) {
    return import('../page/index.vue');
  } else if (isChild && !first) {
    return import('../page/index/layout.vue');
  } else {
    return import(`../${component}.vue`);
  }
}

2. 确保Webpack配置正确：
   检查你的Webpack配置，确保它支持代码分割（通常是默认开启的，但如果你使用了某些特殊的插件或加载器，可能会影响这一点）。
3. 检查组件路径：
   尽管你说路径是正确的，但最好再次确认。Webpack的路径解析有时可能会因为项目结构或Webpack配置的不同而有所变化。
4. 查看Webpack构建输出：
   运行Webpack构建并查看输出，看看是否有关于模块解析或代码分割的错误或警告。
5. 调试和测试：
   在开发环境中使用Webpack的source map功能来调试你的代码，这可以帮助你更清楚地看到实际加载的模块和路径。

通过上述步骤，你应该能够解决动态加载组件时遇到的问题。如果问题仍然存在，可能需要更详细地检查Webpack的配置或项目的其他部分。