dev/hazırlama/üretim dev ve üretim için

Question

<base href=""> 

için farklı (üretim için bu alt klasör var) farklıdır ayarlamak için doğru yolu nedir. Webpack ile farklı bir temel oluşturmanın iyi yolu nedir?

Answer 1

iyi şimdiye kadar config (HtmlWebpackPlugin seçeneği) bu özelliği koymak oldu ne buldum:

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

ve index.html içinde daha sonra çıkışı:

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

Answer 2

Bir varsa Bir HTML dosyasına ayarlanmış template seçenek, daha sonra eklentinin Sürüm 2.x'i herhangi bir değişiklik yapmayacaktır. kesinlikle output.publicPath ayarlamak zorunda kalacak,

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

ve WebPack kullanıyorsanız index.ejs

Answer 3

için index.html dosyayı yeniden adlandırın: Bu durumda

, aşağıdaki gibi @ Stever cevabını değiştirmek gerekecektir aynı değere. Bkz. HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths

Answer 4

Şimdi bunu yapmak çok kolay.

projenizde baz href-webpack-eklentisini yükleyin:

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

ve webpack dosyasında bu kodu almak:

// 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: '/' }) 
] 

Referans: https://github.com/dzonatan/base-href-webpack-plugin