javascript - 没有相对路径的动态导入模块

Question

我有一个使用 React 构建前端的 Symfony 应用程序。从我们上一个版本开始，react 应用程序的构建大小已经变得太大，并且实际上在尝试编译的服务器上耗尽了内存。我一直在尝试实现代码拆分并使初始页面加载效率更高。我遇到了路线问题。

我的路由器是这样定义的。

import React from 'react';
import Loadable from 'react-loadable';
import DelayedLoading from 'components/DelayedLoading';
export default [
  component: Loadable({loader: () => import('containers/Page'), loading: DelayedLoading}),
  routes: [
    {
      path: '/',
      component: Loadable({loader: () => import('containers/MainPage'), loading: DelayedLoading}),
    },
    {
      path: '/foo/bar',
      component: Loadable({loader: () => import('containers/FooBarPage'), loading: DelayedLoading}),
    },
  ]
];

在我的 webpack 配置中我定义了

module.exports = {
  output: {
    path: path.resolve(__dirname, 'web'),
    filename: 'react/js/[name].js',
  },
}

任何时候路径是两个或更多深度然后 block 尝试从错误的目录加载。例如，foo/bar上面的路由将尝试在 foo/react/js/___.js 加载 block ，但是从 / 加载的 block 路线，或任何只有一个深度的路线将从 react/js/___.js 正确加载.

如何从 react/js 加载所有 block ？ ？

Answer 1

解决方案是在问题的讨论中得出的，但我将最终答案放在这里，以防有人遇到这个问题并正在寻找公认的答案，而不是阅读评论。非常感谢@Adam 将我推向正确的方向。

我必须按如下方式更新 output 配置:

module.exports = {
  output: {
    path: path.resolve(__dirname, 'web/react/js'),
    publicPath: '/react/js',
    filename: '[name].js',
  }
}

使用此配置编译代码将输出到 web/react/js/ 目录，但是来自网络的代码将从 /react/js/ 提供。 Webpack 不会根据尝试访问它的页面的路由自动为 JS 代码的服务器路径添加前缀。