Quiero usar las url() en mi CSS de la siguiente manera:

 .someImage { background: url(/assets/img/some-image.png); }

En caso de que esté usando una compilación de desarrollo (config/webpack.dev.js), quiero que se traduzca a background: url(/assets/img/some-image.png); (ya que funciona por defecto).

Sin embargo, en caso de que esté usando la compilación de producción (config/webpack.prod.js), quiero que se traduzca al background: url(http://some-3rd-party-domain.com/assets/img/some-image.png);

Piense en http://some-3rd-party-domain.com , ya que es un dominio completamente diferente al que sirve la aplicación angular.

Otra cosa importante es que no quiero reemplazar todas las rutas en mis archivos css. Lo que significa que quiero reemplazar las url() solo si coinciden con una ruta específica (en este ejemplo: /assets/*).

¿Es esto posible sin hacking profundo? Si es así, ¿cómo?

Aquí puede encontrar algunos detalles de mi configuración actual:

La parte relacionada de config/webpack.common.js :

 // ... { test: /\.css$/, loader: extractVendorCSS.extract({ fallbackLoader: 'style-loader', loader: 'css-loader' }), include: [/node_modules/] }, { test: /\.css$/, use: ['to-string-loader', 'css-loader'], exclude: [/node_modules/] }, { test: /\.(jpg|png|gif)$/, use: 'file-loader' }, { test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url' } // ...

Tanto config/webpack.dev.js como config/webpack.prod.js contienen la información de URL específica del entorno de la siguiente manera:

config/webpack.dev.js :

 // ... const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const API_URL = process.env.API_URL = 'http://localhost:3000/assets/mock-data/'; const ASSETS_URL = process.env.API_URL = 'http://localhost:3000/assets/'; const HOST = process.env.HOST || 'localhost'; const PORT = process.env.PORT || 3000; const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, { host: HOST, API_URL: API_URL, ASSETS_URL: ASSETS_URL, port: PORT, ENV: ENV, }); // ...

config/webpack.prod.js :

 // ... const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const API_URL = process.env.API_URL = 'http://some-api-url/rest/'; const ASSETS_URL = process.env.ASSETS_URL = 'http://some-3rd-party-domain.com/assets/'; const HOST = process.env.HOST || 'localhost'; const PORT = process.env.PORT || 8080; const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, { host: HOST, API_URL: API_URL, ASSETS_URL: ASSETS_URL, port: PORT, ENV: ENV, }); // ...

¡Gracias!