Cung cấp các tài sản tĩnh trong máy chủ webpack dev

Question

Tôi chạy webpack-dev-server từ thư mục gốc của dự án của tôi. Tôi có tài sản thư mục trong /src/tài sản được sao chép bởi CopyWebPackPlugin:

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]) 

Nếu tôi đặt logo.png thư mục tài sản bên trong sau đó Sau khi chạy webpack-dev-server tôi không thể truy cập http://localhost/assets/logo.png tệp nhưng có thể truy cập http://localhost/src/assets/logo.png tệp. Tuy nhiên, nếu tôi chạy ở chế độ sản xuất thì tình hình sẽ đảo ngược.

Cách định cấu hình máy chủ webpack để làm cho http://localhost/assets/logo.png có thể truy cập tệp ở chế độ phát triển?

Answer 1

Bạn có thể yêu cầu webpack sử dụng đường dẫn khác khi tải từ trình duyệt.

Trong phần output của tệp cấu hình webpack của bạn thêm trường publicPath trỏ đến thư mục assets của bạn.

webpack.config.js

output: { 
    // your stuff 
    publicPath: '/assets/' 
} 

Answer 2

Tôi muốn nói thêm rằng nó là ngược lại đối với tôi. Ban đầu tôi đã có hình ảnh của mình và các tệp .obj/.mtl trong một thư mục public đã tồn tại ở gốc của ứng dụng của tôi. Tôi đã chuyển chúng vào thư mục assets đã được tạo trong thư mục app.

Thực hiện một npm install --save-dev copy-webpack-plugin và thêm các

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]) 

đến tập tin webpack.common.js cố định vấn đề của tôi.