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

【问题标题】：Dynamically imported modules without relative paths没有相对路径的动态导入模块
【发布时间】：2019-02-13 06:15:23
【问题描述】：

我有一个使用 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 加载所有块？

【问题讨论】：

尝试将path 属性更改为path.resolve(__dirname, 'web/react/js')，将filename 属性更改为[name].js。您不应该在 filename 属性中包含路径。
当资产为生产而构建时，它们被放置在${output.path}/${output.filename}。在我的情况下，web/react/js/ 是这些资产需要放置在文件系统上以便可以提供服务的目录。这导致我发现 webpack 总是试图直接从 /{resource}.js 加载资源。通过添加一个额外的属性publicPath: '/react/js'，我能够让 webpack 将文件吐出到web/react/js/ 目录并从/react/js/ 提供它们而不用前缀目录路径。

标签： javascript reactjs webpack webpack-dev-server

【解决方案1】：

解决方案是在对问题的讨论中得出的，但我将最终答案放在这里，以防有人遇到这个问题并正在寻找可接受的答案，而不是阅读 cmets。非常感谢@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】：

我改用webpack resolve 来避免这些问题

【讨论】：

我认为 webpack.resolve 中没有选项可以解决资产的编译位置。