webpack中的多角度配置文件

我不確定這是一個Webpack問題還是角度問題，但是我有一個Angular應用程序，它使用的是與angular.io網站中的設置非常相似的webpack。webpack中的多角度配置文件

所以，我有我的webpack.config.js

module.exports = require('./config/webpack.dev.js');

這是默認使用的，當我執行我的任務

"start-webpack": "webpack-dev-server --inline --progress"

，但我有我需要設置時，幾個應用程序參數運行應用程序，就像一對API的url和其他東西一樣。所以，我有幾個文件dev1.ts一個文件夾/ env的，dev2.ts這樣的：

export = { 
    API: 'http://xxxx', 
    BASE_URL: 'http://xxxx', 
};

，我希望能夠一旦應用程序開始訪問這些信息。所以最好我會跟這樣的啓動應用程序：

"start-webpack": "webpack-dev-server --config dev1 --inline --progress"

，然後在我的角度應用我會檢索API，BASE_URL莫名其妙。我有點失落，因爲我什至不知道這是否可行。

任何人都可以給我一個提示在哪裏看？

謝謝

來源

2017-03-27 David

您可能正在尋找['DefinePlugin']（https://webpack.js.org/plugins/define-plugin/）全局和[this]（https://webpack.js.org/guides/生產 - 建造/）有不同的環境。 – Ivan

有趣，但我不確定，這樣我需要爲每個設置有不同的webpack配置;在這種情況下，我有2個開發配置和2個生產配置，但我不想擁有4個不同的webpack配置文件 – David

好的，我解決了我的問題;感謝@Ivan的提示。

最後這是我的package.json腳本部分：

"start1": "webpack-dev-server --env.config=dev1 --inline --progress", 
"start2": "webpack-dev-server --env.config=dev2 --inline --progress",

我webpack.web.js

，所以我有這樣的：

const envConfig = { 
    dev1: { 
    API: xxxx 
    }, 
    dev2: { 
    API: yyyy 
    } 
} 

module.exports = (env = {}) => { 

    return webpackMerge(commonConfig, { 
    ... 
    plugins: [ 
     new webpack.DefinePlugin({ 
     'process.env.CONFIG': JSON.stringify(envConfig[env.config]) 
     }) 
    ], 
    ... 
    }); 
}

，現在我可以訪問內部角我的配置與process.env.CONFIG（它可以是任何其他的名字，顯然）。對我來說，是有意義的有DEV1和DEV2因爲我有內部的一些其他URL和屬性，但在情況下，我想揭露一個單一的財產，我可以做到這一點，而不是：

const envConfig = { 
    dev1: xxxx, 
    dev2: yyyy 
}

此外，this link幫我配置一切。

希望它有助於如果有人需要類似的東西。

來源

2017-03-28 14:59:01 David

webpack中的多角度配置文件

回答

相關問題