Question

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

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

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

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

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

Angular 2 / Webpack环境配置

1 个答案: