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

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',
  },
}

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

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

Answer 1

我通过使用 webpack resolve 来避免这些问题

Answer 2

解决方案是在问题的讨论中得出的，但我将最终答案放在这里以防万一有人遇到这个问题并正在寻找已接受的答案，而不是阅读评论。非常感谢@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 代码添加路径前缀。

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

Dynamically imported modules without relative paths

javascript

reactjs

webpack

webpack-dev-server