未找到 React Webpack Dev Server main.js

Question

我正在将 React 与 Webpack 4 一起使用，并且正在使用 webpack 开发服务器进行开发。这很有效，但是我有一个问题。

开发服务器创建一个文件“main.js”。例如，当我在页面 /edit/1 上时就会出现问题。

historyApiFallback 确保我没有得到 404，但我的 index.html 是服务器。那个有效。

问题是，当我在 /edit/1 上时，main.js 文件不会呈现为 localhost:8080/main.js，而是呈现为 localhost:8080/edit/main.js。该文件不是由开发服务器呈现的，因此它返回 404。

是否可以使 main.js 具有完整路径？或者可能有另一种解决方案？

谢谢！

Answer 1

我正要问同样的问题（对于 vue），并发现答案不知何故埋在这里：historyApiFallback 在 Webpack 开发服务器中不起作用

只需添加到webpack.config.js：

output: {
    publicPath: '/',
}, 

我花了很长时间才找到这个……而且它不是很直观。我现在的工作webpack.config.js是这样的：

module.exports = {
    // ...
    output: {
        publicPath: '/',
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true,
    }
}