Qual è il modo giusto per impostare un diverso <base> per dev/staging/produzione

Question

<base href=""> 

per dev e la produzione sono diversi (per la produzione è sottocartella). Qual è il modo migliore per creare una base diversa con il webpack?

Answer 1

il meglio quello che ho trovato finora è stato quello di mettere questa proprietà in config (opzionale HtmlWebpackPlugin):

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

e poi l'uscita in index.html:

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

Answer 2

Se si dispone di un L'opzione template è impostata su un file HTML, quindi la versione 2.x del plug-in non eseguirà alcuna sostituzione.

In questo caso, sarà necessario modificare la risposta di @ Stever come segue:

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

e rinominare il file index.html a index.ejs

Answer 3

Se si utilizza webpack, si avrà certamente impostare output.publicPath allo stesso valore Vedi HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths

Answer 4

Ora è facile farlo.

Installare la base-href-webpack-plugin nel progetto:

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

e importare questo codice nel file di 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: '/' }) 
] 

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