Question

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

我的路由器的定义与此类似。

let obj={ stops: [ 'Route1', 'Route2' ], time: [ '12:00 am', '12:30 am', '01:00 am', '01:30 am', '02:00 am' ], _id: 5c636357bc92ec0e44a44946}

let arr=[...obj.stops,...obj.time,obj._id]

在我的webpack配置中，

   let obj={ stops: [ 'Route1', 'Route2' ], time: [ '12:00 am', '12:30 am', '01:00 am', '01:30 am', '02:00 am' ], _id: 5c636357bc92ec0e44a44946}
    let arr=[...obj.time]

每当路径的深度为两个或更多时，这些块就会尝试从错误的目录加载。例如，上面的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}), }, ] ];路由将尝试在module.exports = { output: { path: path.resolve(__dirname, 'web'), filename: 'react/js/[name].js', }, }处加载块，但是从foo/bar路由加载的块或任何深度仅一的路由将从{{1 }}。

如何从foo/react/js/___.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代码的路径。

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

2 个答案: