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

大卫·鲍卡姆(David Baucum)

我有一个使用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,但从该/路由加载的块或仅一个深度的任何路由都将从正确加载react/js/___.js

如何获得所有要加载的块react/js

大卫·鲍卡姆(David Baucum)

解决方案是在问题的讨论中达成的,但如果有人遇到此问题并正在寻找可接受的答案,而不是阅读评论,则将最终答案放在此处。非常感谢@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代码的路径。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章