webpack - What is the right way to set a different <base> for dev/staging/production

Question

<base href="">

for dev and production are different(for production it's subfolder). What is the good way to build different base with webpack?

Answer 1

the best what I found so far was to put this property in config(HtmlWebpackPlugin option):

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

and then output it in index.html:

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