我在使用react-router和webpack-dev-server时遇到了一些问题,无法实现嵌套的url路由.

webpack.config.js

output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: "/", <-- this enabled routing to /register/step2
    filename: "js/bundle.js",
},

routes.js

const routes = {
    childRoutes: [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '/register/step2', component: SecondStep },
    ]
};

export default (<Router routes={routes} history={createBrowserHistory()} />);

当在appliation中点击时,我可以进入/ register/step2,但是一旦我在浏览器中点击刷新,我的common.js和bundle.js就丢失了:404,因为它试图从/ register /目录加载所有东西.

有人可以帮忙吗？谢谢.

我来自哪里

我已经使用webpack已有一段时间了，但这是我第一次没有为此修改入门套件，而是尝试从头开始进行所有设置。

我跟随着Surviv.js.com上的这篇不错的文章，并继承了那里描述的一些方法，将它们与我的一些早期设置结合在一起（例如根据发送的生产变量设置不同的名称和路径）。

在讲座期间，我尝试尽可能多地运行“构建”和“开始”，以免被无法跟踪的意外行为所困扰。这很好。

然后在某个时候摆弄有关从第三方框架中排除未使用的CSS 的章节时，我以某种方式破坏了开发服务器的设置。（"run build"仍然有效！）

问题

我的热服务器定义为192.168.1.2:3000（这正是我想要的方式）。当我webpack-dev-server使用下面进一步显示的设置运行时，在该位置显示404（无法获取/）。现在，我已经读了很多有关如何正确设置webpack开发服务器的信息，但是由于我仍然不完全了解如何正确设置Webpack开发服务器，所以我仍然做得不好...（很可能不是这里一个人...）。路径有效。

这是我的理解（通用开发服务器设置）：

（如果我在这方面有误，请帮助我）

• 我的输出路径webpack.config.js只会在运行开发服务器时在内存中提供，因此在物理上是不可见的（path: path.join(__dirname, 'devServerFolder'例如，如果输出是我创建的文件夹，那么如果在我的项目结构中找不到该文件夹​​，我将永远看不到该文件夹​​） ）
• 静态index.html指向我bundle.js将一个文件夹中需要的地方我指向与publicPath以及与contentBase（这可能是我的devServerFolder，我就需要创建与index.html它;通常在网络上大部份的设定同样public使用的文件夹来保存生产建立）
• 如果我使用html-webpack-plugin该插件，它将自动为我生成该文件，而无需指向任何内容，因为bundle.js被插件写入了该文件

这些是真正使我难以理解的要点。我已经尝试了很多。的。不同。结合使用publicPath和contentBase设置时，运气不佳，无法重新建立我的开发服务器（工作正常）。 请注意，我在代码或使用编译我的版本时没有任何问题run build，它们可以正常运行并且应该正常运行。

配置

资料夹结构

webpack.test
|
| - app                    // App folder
     |
     | …

我在使用带有webpackdevserver的react路由器设置单页反应应用程序时遇到了一些问题.如果我使用browserhistory webpack在输入嵌套路由url时会遇到一些问题(例如/ client/view).这可以通过添加apiFallback来解决,但热重载仍然有问题.它尝试从不存在的深层URL(/client/view/hot-update.json)加载hot-update.json文件,因此失败并重新加载页面.如何告诉hotreload始终从基本URL(/)加载hot-update.json？