将Webpack生产环境指向不同的API URL

Question

将Webpack生产环境指向不同的API URL

3

我在我的angular 4项目中使用webpack。它指向同一URL的api。现在，对于生产环境，我有一个不同的API URL，那么我应该在哪里精确地放置新的URL？我正在使用jhipster项目。
来源：https://jhipster.github.io/using-angular/

webpack.prod.js:

const commonConfig = require('./webpack.common.js');
const webpackMerge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const Visualizer = require('webpack-visualizer-plugin');
const path = require('path');
const ENV = 'prod';

module.exports = webpackMerge(commonConfig({ env: ENV }), {
    devtool: 'source-map',
    output: {
        path: path.resolve('./build/www'),
        filename: '[hash].[name].bundle.js',
        chunkFilename: '[hash].[id].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin('[hash].styles.css'),
        new Visualizer({
            // Webpack statistics in target folder
            filename: '../stats.html'
        })
    ]
});

- Jeeten Parmar

1

不确定这是否适合您，但您是否尝试将一个输出属性添加到您的 module.exports？output: { publicPath: '/' }, - peinearydevelopment

@Aravind，你能帮我继续吗？ - Jeeten Parmar

@Aravind，请检查 Skype。 - Jeeten Parmar

@JeetenParmar，那个devserver的配置有帮到你吗？ - alphapilgrim

@alphapilgrim，它在生产环境中不能正常工作。 - Jeeten Parmar

显示剩余6条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alphapilgrim · Answer 1

文档或V2。另外，您可能需要考虑向输出对象添加公共路径（这是值得探索的内容）。您只需编辑主机文件以包含所需域名，然后将以下代码添加到webpack.config中：

devServer: {
  host: "localhost.specialurl.com",
  port: 1234,
  https: true
},



//webpack.production.config.js
var path = require('path');
var mainPath = path.resolve(__dirname, 'app', 'main.js');
var buildPath = path.resolve(__dirname, 'public', 'build');

entry: mainPath,
  output: {

    // Everything related to Webpack should go through a build path,
    // localhost:3000/build. That makes proxying easier to handle
    path: buildPath,
    filename: 'bundle.js'
  },

- Andrea Carraro · Answer 2

我建议将您的依赖于环境的变量视为实际的环境变量，正如12因素应用程序方法中提到的第3条规则。

这样，您就不会在代码中过度加载不断变化的环境内容，并且甚至可以直接从部署系统外轻松更新它们。

在node环境中，我个人更喜欢将这些变量存储到放置在项目根目录的专用.env文件中。

VAR_1=foo
VAR_2=bar

你可能会有不同的.xxx.env文件，针对每个环境或在构建之前以编程方式切换文件。

为了使声明的环境变量对你的代码可用，我建议使用webpack-dotenv-plugin。

你将能够从应用程序中获取你的环境变量，就像标准节点用户环境变量一样：

const var1 = process.env.VAR_1;   // foo
const var2 = process.env.VAR_2;   // bar