Cách đúng để đặt <base> khác nhau cho dev/dàn dựng/sản xuất

Question

<base href=""> 

cho dev và sản xuất là khác nhau (đối với sản xuất nó là thư mục con). Cách tốt để xây dựng cơ sở khác nhau với webpack là gì?

Answer 1

tốt nhất những gì tôi tìm thấy cho đến nay là đặt khách sạn này trong cấu hình (tùy chọn HtmlWebpackPlugin):

new HtmlWebpackPlugin({ 
    ... 
    baseUrl: process.env.NODE_ENV == 'development'?'/':'/app/' 
}) 

và sau đó đầu ra nó trong index.html:

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

Answer 2

Nếu bạn có một Tùy chọn template được đặt thành tệp HTML thì Phiên bản 2.x của trình cắm sẽ không thực hiện bất kỳ thay thế nào.

Trong trường hợp này, bạn sẽ cần phải sửa đổi câu trả lời @ Stever như sau:

new HtmlWebpackPlugin({ 
    ... 
    template: './src/index.ejs', 
    baseUrl: process.env.NODE_ENV == 'development'?'/':'/app/' 
}) 

và đổi tên tập tin index.html của bạn để index.ejs

Answer 3

Nếu bạn đang sử dụng webpack, bạn chắc chắn sẽ phải thiết lập output.publicPath với cùng một giá trị. Xem HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths

Answer 4

Giờ đây thật dễ dàng để thực hiện.

Đặt chân đế-href-webpack-plugin trong dự án của bạn:

npm install --save-dev base-href-webpack-plugin 

và nhập mã này trong tập tin webpack:

// Import package 
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin'); // Or `import 'base-href-webpack-plugin';` if using typescript 

// Add to plugins 
plugins: [ 
    new BaseHrefWebpackPlugin({ baseHref: '/' }) 
] 

tham khảo: https://github.com/dzonatan/base-href-webpack-plugin