react-router-dom 项目在与 webpack 捆绑时由于 publicPath 而中断

Question

我正在使用 React-router-dom.

做一个项目

在我的 webpack 中我设置：

output: {
    filename: 'app.js',
        path: path.join(__dirname, 'dist'),
        publicPath: '/'
},
devServer: {
    historyApiFallback: true
}...

我需要 publicPath 成为 "/" 才能使路由正常工作（除非我错了）

当我运行与 webpack-dev-server --inline --hot --process 的项目时，一切正常。

但是当我尝试构建和捆绑它时，出现了这个错误：

index.html:11 GET file:///C:/app.js net::ERR_FILE_NOT_FOUND

您知道什么是配置它的正确方法，这样构建才能正常工作，因为项目运行可以很好地使用 webpack-dev-server 吗？

Answer 1

我们开始吧，如何运行从 file:/// 反应应用程序。

更改 output 部分的 webpack 配置，使 publicPath: './'，例如，如果 index.html 和捆绑文件位于同一目录中：
```
entry: ...
output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].js',
    publicPath: './'
}
```

这将允许在与 html 相同的目录中加载捆绑文件，而不是在当前网站的根目录中（在 publicPath: '/' 的情况下）。

如果在 chrome 中进行测试，请在 Chrome 扩展中启用 "Allow access to file URLs"，如 here 所述。
如果使用路由，请使用 HashRouter 而不是 BrowserRouter（关注 react-router v4）。有关这方面的更多信息，请参阅 this SO answer。

react-router-dom 项目在与 webpack 捆绑时由于 publicPath 而中断

react-router-dom project breaks because of publicPath when bundling with webpack

javascript

reactjs

webpack

react-router-dom