Angular 2 / Webpack环境配置

时间:2017-02-15 15:04:33

标签: angular webpack angular-cli webpack-2

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

我正在寻找与使用Angular CLI创建的项目处理环境配置非常相似的方法。不幸的是,我还没有使用CLI,因为它仍处于测试阶段,而且我还没有围绕项目的工作原理以及如何扩展其构建管道。

我还想避免在我的源代码中散布条件语句,所以在我想要导入环境文件的if语句中没有使用process.env.NODE_ENV

1 个答案:

答案 0 :(得分:17)

好的,我终于想出办法来做到这一点。首先,环境文件:

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匹配的正则表达式。第二个参数是要在构建中使用的配置模块。

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