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

Question

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

Answer 1

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 2

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 3

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 BaseHredWebpackPlugin 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>

Answer 4

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 5

If you are using Angular CLI 6, you can specify baseHref and deploy url as part of your production config (projects > xxx > architect > build > configurations > production) inside angular.json.

Answer 6

If you are using webpack, you will certainly have to set output.publicPath to the same value. See HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths