Angular2/Webpack环境配置

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

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

Angular2/Webpack环境配置

Angular 2/Webpack Environment Configurations

webpack

angular-cli

webpack-2

angular