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 %>" />

Answer 2

If you have a template option set to an HTML file then Version 2.x of the plug-in will not perform any substitution.

In this case, you will need to modify @stever's answer as follows:

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

and rename your index.html file to index.ejs

Answer 3

Now it is easy to do it.

Install the base-href-webpack-plugin in your project:

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

and import this code in webpack file:

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

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

Answer 4

In Webpack 4 I have tried the baseUrl in HtmlWebpackPlugin , but it's never gets parsed in the html. So you need a new plugin called BaseHrefWebpackPlugin along with HtmlWebpackPlugin

Webpack.config

 new HtmlWebpackPlugin(), //this will create default template
        new HtmlWebpackPlugin({
            title: 'MyApp' //replace title
  
        }),
        new BaseHrefWebpackPlugin({
            baseHref: process.env.NODE_ENV == 'development' ? '/' : '/MyApp/'
        })

Html

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