Question

是否可以根据webpack构建配置文件进行参数化URL？我正在谈论从API获取数据的服务URL。例如，我在我的Angular2应用程序中：

package.json 的一部分：

    "scripts": {
        "build-prod": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
        "build-dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail" 
    },

webpack.dev.js 的一部分：

output: {
        path: helpers.root('dist'),
        publicPath: 'http://localhost:8080/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

webpack.prod.js 的一部分：

output: {
        path: helpers.root('dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

和示例 exampleService.ts ：

的一部分

API_URL = "some/address/for/me";

get(url: string): Promise<T> {
        return this.http.get(this.API_URL)
        .toPromise()
        .then(response => {//someCode})
        .catch(this.handleError);
    }

它的工作正常。但是，如果我将使用 dev 配置文件构建应用程序，我希望应用程序询问我的Apiary（例如），而不是我的localhost。我应该在哪里更改我的webpack.dev.js？

抱歉我的英语不好。

Answer 1

webpack define-plugin根据源代码执行搜索和替换。使用PRODUCTION中的常量或exampleService.ts中的npm de-facto standard process.env.NODE_ENV来选择要使用的API网址。

在您的webpack配置中应用define-plugin：

module.exports = {
  /*...*/
  plugins:[
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

我建议您阅读building for production上的网络包指南。

注意：我认为使用API_URL字符串some/address/for/me上的插件也可能有效：new webpack.DefinePlugin({'some/address/for/me可能＆＃39;：JSON.stringify（＆＃39;其他/网址＆＃ 39;）}）`

根据webpack

1 个答案: