使用 React Router 捆绑 Webpack答案

【问题标题】：Webpack Bundling with React Router使用 React Router 捆绑 Webpack
【发布时间】：2020-03-04 12:21:46
【问题描述】：

一切都很好，然后出于某种原因我决定更新一些软件包。不好的举动。

我正在使用 React.lazy 和 Webpack 对我的 JavaScript 进行代码拆分和捆绑。如果我在根 URL (http://localhost:9000/) 没有问题。它将加载http://localhost:9000/dist/24.js。但是如果（使用 react-router）我在应用程序的任何地方，比如http://localhost:9000/page/category/，它将尝试加载http://localhost:9000/page/category/dist/26.js。显然这不是保存文件的地方。

我可以通过使用通配符来忽略生产中的问题：app.get('*/dist/:js' ...，但我的 devServer 无法做到这一点。我确信有一种方法可以告诉它始终使用绝对路径，但我不知道该怎么做。 如何让它始终从http://localhost:9000/dist/*.js 加载？

这是webpack.config.js的相关部分。

    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
      path: path.resolve(process.cwd(), 'dist'),
      publicPath: 'dist/',
    },

我正在使用 webpack 4.41.2、webpack-dev-server 3.9.0、react-router 5.1.2 和 react-hot-loader 4.12.16。如果您想知道为什么我使用 process.cwd() 而不是 __dirname，那是因为我在少数应用程序中通过符号链接使用此文件。

【问题讨论】：

标签： javascript reactjs webpack react-router webpack-dev-server

【解决方案1】：

在任何<script/> 之前添加<base href="/" /> 到index.html。

找到它here。

【讨论】：