webpackの複数の設定ファイル

Question

これはWebpackの質問またはAngularの質問ではありませんが、angular.ioサイトの設定と非常によく似た設定のwebpackを使用するAngularアプリがあります。

だから私は、私は

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

私のタスクを実行するときにデフォルトで使用されるが、私は、私はセットアップに必要ないくつかのアプリのパラメータを持っている私のwebpack.config.js

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

を持っていますいくつかの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を取得すると思います。 これが実現可能かどうかわからないので少し失われています。

誰でも私にどこを見てもらうことができますか？

ありがとうございました

Answer 1

私は問題を解決しました。 @Ivanのヒントのおかげで。

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]) 
     }) 
    ], 
    ... 
    }); 
} 

、今、私はちょうど角の内側に私の設定にアクセスすることができます：私はこれを持っている私のwebpack.web.jsで

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

ので、最後にこの私のpackage.jsonスクリプトセクション

process.env.CONFIG（これは他の名前でもかまいません）。私の場合は 私は内部のいくつかの他のURLとプロパティを持っているので、それはDEV1とDEV2を持っていることは理にかなっていますが、場合には、私は私が代わりにこれを行うことができ、単一のプロパティを公開したかった：

また

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

、this linkが私を助けましたすべてを構成します。

誰かが似たようなものを必要としたら助けてください。