javascript - Configuración del entorno en una aplicación TypeScript con Webpack

He revisado varias soluciones, incluidas las que se enumeran aquí:

• Variables de entorno en una aplicación JS isomórfica: ¿Webpack buscar y reemplazar?
• Pasando variables dependientes del entorno en webpack

Estoy acostumbrado a usar algo como gulp-replace-task para buscar y actualizar un archivo config de la aplicación para reemplazar cosas como @@SERVER_URL con algo establecido desde el entorno.

De esa manera puedo hacer export SERVER_URL=something o ejecutar el script con SERVER_URL=something gulp build para establecer la configuración.

He intentado todo lo siguiente:

Usando el transform-loader más envify

Esta es una sugerencia de la primera pregunta, pero no funciona para mí debido a:

Module build failed: Error: Parse Error: Line 1: Illegal import declaration
at throwError (ngapp/node_modules/esprima-fb/esprima.js:2823:21)

Parece que esprima-fb está usando una declaración import que Webpack no puede usar por alguna razón u otra. El proyecto ya no se mantiene, así que este puede ser el camino equivocado a seguir.

Usando DefinePlugin

He agregado:

module: {plugins: [new webpack.DefinePlugin({"process.env.SERVER_URL": "something"})]}

Esto parece ser ignorado, o al menos process.env.SERVER_URL no se interpola en mis archivos de TypeScript. Cuando hago console.log(process.env), emite un objeto vacío.

Configuración usando --define para webpack

Actualicé mi script npm:

"start": "webpack-dev-server --define process.env.SERVER_URL=${SERVER_URL}"

Sin embargo, esto solo termina reemplazando process.env.SERVER_URL en mi código con un literal "$ {SERVER_URL}" en lugar de ser interpolado en el script de npm.

¿Existe una forma simple/conveniente (o en este punto, realmente cualquier) de usar variables de entorno en aplicaciones TypeScript construidas con Webpack?

Mi configuración de Webpack es esencialmente la que se describe en los documentos de Angular.