deploy - webpack mode

¿Cuál es la forma correcta de establecer una<base> diferente para dev/staging/production?

Question

<base href="">

Para dev y la producción son diferentes (para la producción es subcarpeta). ¿Cuál es la buena manera de construir diferentes bases con webpack?

Answer 1

Ahora es fácil hacerlo.

Instale el complemento base-href-webpack en su proyecto:

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

e importar este código en el archivo 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: ''/'' })
]

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

Answer 2

En Webpack 4 probé el baseUrl en HtmlWebpackPlugin , pero nunca se analiza en el html. Así que necesitas un nuevo complemento llamado BaseHredWebpackPlugin junto con 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 3

Lo mejor que encontré hasta ahora fue poner esta propiedad en configuración (opción HtmlWebpackPlugin):

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

y luego salida en index.html:

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

Answer 4

Si está usando un paquete web, ciertamente tendrá que establecer output.publicPath en el mismo valor. Ver HtmlWebpackPlugin inyecta archivos de ruta relativa que se rompen cuando se cargan rutas de sitios web no root.

Answer 5

Si está utilizando Angular CLI 6, puede especificar baseHref y desplegar url como parte de su configuración de producción (proyectos> xxx> arquitecto> compilar> configuraciones> producción) dentro de angular.json .

Answer 6

Si tiene una opción de template establecida en un archivo HTML, la versión 2.x del complemento no realizará ninguna sustitución.

En este caso, deberá modificar la respuesta de @stever de la siguiente manera:

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

y renombra tu archivo index.html a index.ejs