javascript - React Webpack Dev Server không tìm thấy main.js

Tôi đang sử dụng React với Webpack 4 và đang phát triển với máy chủ dev của webpack. Điều này hoạt động hoàn hảo, tuy nhiên tôi có một vấn đề.

Máy chủ phát triển tạo ra một tệp "main.js". Vấn đề phát sinh khi tôi ở trên trang /edit/1 chẳng hạn.

historyApiFallback đảm bảo rằng tôi không nhận được lỗi 404, mà thay vào đó là trang index.html của tôi được phục vụ. Điều đó hoạt động.

Vấn đề là khi tôi ở trên /edit/1, file main.js không được hiển thị dưới dạng localhost:8080/main.js, mà dưới dạng localhost:8080/edit/main.js. File này không được server phát triển hiển thị nên trả về 404.

Có thể làm cho main.js có đường dẫn đầy đủ không? Hay có thể có giải pháp khác?

Cảm ơn!

Câu trả lời #1

Tôi định hỏi cùng một câu hỏi (cho vue) và bằng cách nào đó tìm thấy câu trả lời được giấu ở đây: historyApiFallback không hoạt động trong máy chủ phát triển Webpack

Chỉ cần thêm vào webpack.config.js:

output: {
    publicPath: '/',
}, 

Mất quá nhiều thời gian để tôi tìm ra cái này... và nó thực sự không trực quan. webpack.config.js của tôi hiện tại hoạt động trông như thế này:

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