javascript - HtmlWebpackPlugin chèn các tệp có đường dẫn tương đối, điều này bị lỗi khi tải các đường dẫn website không phải gốc

Tôi đang sử dụng webpack và HtmlWebpackPlugin để chèn các tệp js và css đã được đóng gói vào một tệp mẫu html.

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

Và nó tạo ra tệp html sau.

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="main-295c5189923694ec44ac.min.js"></script>
  </body>
</html>

Điều này hoạt động tốt khi truy cập vào gốc của ứng dụng localhost:3000/, nhưng thất bại khi tôi cố gắng truy cập ứng dụng từ một URL khác, ví dụ, localhost:3000/items/1 vì các tệp đóng gói không được chèn với đường dẫn tuyệt đối. Khi tệp html được tải, nó sẽ tìm tệp js bên trong thư mục /items không tồn tại vì react-router chưa được tải.

Làm thế nào để tôi có thể khiến HtmlWebpackPlugin chèn các tệp với đường dẫn tuyệt đối, để express sẽ tìm chúng tại gốc của thư mục /dist của tôi và không phải tại /dist/items/main-...min.js? Hoặc có thể tôi có thể thay đổi server express của mình để giải quyết vấn đề này?

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

Về cơ bản, tôi chỉ cần lấy dòng:

<script src="main...js"></script>

có một dấu gạch chéo ở đầu nguồn.

<script src="/main...js></script>

Câu trả lời #1

Hãy thử thiết lập publicPath trong cấu hình webpack của bạn:

output.publicPath = '/'

HtmlWebpackPlugin sử dụng publicPath để thêm vào trước các url của các injects.

Một lựa chọn khác là thiết lập href cơ sở trong <head> của mẫu html của bạn, để xác định url cơ sở của tất cả các url tương đối trong tài liệu của bạn.

<base href="http://localhost:3000/">

Câu trả lời #2

Thực ra, tôi đã phải đặt :

output.publicPath: './';

để nó hoạt động trong một đường dẫn không phải ROOT. Đồng thời tôi đang chèn :

   baseUrl: './'

vào

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

Khi cả hai tham số được thiết lập, nó hoạt động rất trơn tru.