Pasar variables dependientes del entorno en el paquete web
Estoy intentando convertir una aplicación angular de gulp a webpack. en gulp utilizo gulp-preprocess para reemplazar algunas variables en la página html (por ejemplo, el nombre de la base de datos) dependiendo de NODE_ENV. ¿Cuál es la mejor manera de lograr un resultado similar con webpack?
Hay dos formas básicas de lograrlo.
Definir complemento
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
Tenga en cuenta que esto simplemente reemplazará las coincidencias "tal cual". Es por eso que la cadena tiene el formato que tiene. Podrías tener una estructura más compleja, como un objeto ahí, pero ya entiendes la idea.
Complemento de entorno
new webpack.EnvironmentPlugin(['NODE_ENV'])
EnvironmentPluginutiliza DefinePlugininternamente y asigna los valores del entorno para codificar a través de él. Sintaxis más concisa.
Alias
Alternativamente, podría consumir la configuración a través de un módulo con alias . Desde el punto de vista del consumidor, se vería así:
var config = require('config');
La configuración en sí podría verse así:
resolve: {
alias: {
config: path.join(__dirname, 'config', process.env.NODE_ENV)
}
}
Digamos process.env.NODE_ENVque es development. Se asignaría a ./config/development.jsentonces. El módulo al que se asigna puede exportar una configuración como esta:
module.exports = {
testing: 'something',
...
};
Solo otra opción, si desea usar solo una interfaz cli, simplemente use la defineopción de paquete web. Agrego el siguiente script en mi package.json:
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
Así que sólo tengo que correr npm run build-production.
Investigué un par de opciones sobre cómo configurar variables específicas del entorno y terminé con esto:
Actualmente tengo 2 configuraciones de paquete web:
// webpack.production.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production'),
'API_URL': JSON.stringify('http://localhost:8080/bands')
}
}),
// webpack.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
}
}),
En mi código obtengo el valor de API_URLde esta manera:
const apiUrl = process.env.API_URL;
Los documentos de Webpack tienen un ejemplo:
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
Con ESLint necesitas permitir específicamente variables no definidas en el código, si tienes no-undefuna regla activada. Como esto:
/*global TWO*/
console.log('Running App version ' + TWO);
Si no le gusta configurar demasiado, consulte Crear aplicación React: agregar variables de entorno personalizadas . De todos modos, CRA usa Webpack.
Puede pasar variables de entorno sin complementos adicionales usando--env
Paquete web 2-4
webpack --config webpack.config.js --env.foo=bar
Paquete web 5+ (sin .)
webpack --config webpack.config.js --env foo=bar
Luego, use la variable en webpack.config.js:
module.exports = function(env) {
if (env.foo === 'bar') {
// do something
}
}
Lectura adicional : ¿Webpack 2.0 no admite argumentos de línea de comando personalizados? #2254
