Angular 2/Webpack环境配置

Question

我想配置我的Webpack构建,以便我可以import { environment } from './environments/environment'在我的Angular 2组件中声明并environment.ts在开发期间具有导入负载,但是environment.prod.ts在生产中.如何在构建期间告诉Webpack替换导入？

我正在寻找与使用Angular CLI创建的项目处理环境配置的方式非常相似的东西.不幸的是,我还没有使用CLI,因为它仍处于测试阶段,我也没有关注项目如何工作以及如何扩展其构建管道.

我还想避免在我的源代码中散布条件语句,因此不要process.env.NODE_ENV在if语句中使用我要导入环境文件的任何地方.

Answer 1

好吧,我终于想出办法来做到这一点.一,环境文件:

environment.interface.ts:

export interface Environment {
    apiRoot: string,
    target: string
}

environment.dev.ts:

import { Environment } from './environment.interface';

export const environment: Environment = {
    target: 'dev',
    apiRoot: 'http://www.dev.api.com'
}

environment.prod.ts:

import { Environment } from './environment.interface';

export const environment: Environment = {
    target: 'prod',
    apiRoot: 'http://www.api.com'
}

environment.ts:

export { environment } from './environment.dev';

然后,正常导入Angular组件:

import { environment } from './environments/environment';

最后,使用webpack配置中的NormalModuleReplacementPlugin:

webpack.prod.js:

module.exports = webpackMerge(commonConfig, {
  ...
  plugins: [
    ...
    new webpack.NormalModuleReplacementPlugin(/\.\/environment\.dev/, './environment.prod')
  ]
});

在NormalModuleReplacementPlugin的第一个参数是匹配的正则表达式environment.dev中environment.ts.第二个参数是要在构建中使用的配置模块.

我确信通过使用一些环境变量可以使这更加优雅,但这是一个很好的起点.