Webpack devサーバーコマンドラインからのカスタムパラメータ

Question

コマンドラインからカスタムパラメータを渡したいと思います。このようなもの：

webpack-dev-server --inline --hot --customparam1=value 

私が達成しようとしているのは、私がvue-loaderアプリケーションに取り組んでいることです。アプリケーションには、データを取得する特定のサービスがあります。

私は、apiサーバーとして機能する別のアプリケーションを持っています。 APIサーバーがある場合は

1）：私たちは、

（私たちのチームのすべてのメンバーがAPIサーバーへのアクセスを持っていないので）2通りの方法で実行するアプリケーションを必要とするので、そのサービスは、データを取得するための2つの方法があります（開発チームのために）実行されている、HTTPはAPIサーバは、設計チームのために（実行されていない場合は、単にサービスに既に存在スタティックデータを使用）ローカルホスト

2）からデータを取得するために呼び出して使用します。

var someData; 
if (customparam1 === "withApi"){ 
    someData=getData("http://localhost:8081/apiendpoint"); 
} else { 
    someData=[ 
     {a:b}, 
     {c:d}, 
     // more custom array of static data 
     ..... 
    ] 
} 

したがって、このcustomparam1はwebpack-dev-serverコマンドラインから渡されるはずですthisのように、見つけられないような方法はありませんか？

どうすればいいですか？

PS：私はあなたが引数としてvar=valueを取る--defineオプションを使用することができますWebPACKの1.12.1

Answer 1

にしています。 Webpackは単にすべての出現をその値で置き換えます。

if (ENABLE_API) { 
    // Use api 
} else { 
    // Use static data 
} 

あなたが実行すると：：

webpack-dev-server --inline --hot --define ENABLE_API 

をそれがになります：次のコードでたとえば

if (true) { 
    // Use api 
} else { 
    // Use static data 
} 

また--define ENABLE_API=falseでそれを実行する必要があり、それ以外の場合は、意志ENABLE_APIが定義されていないというエラーが発生します。単純なテキスト置換のため、渡す値はそのまま挿入されるので、文字列を使用する場合は'"value"'（引用符で囲んでください）を使用する必要があります。それ以外の場合は通常のJavaScriptとして解釈されますが、コマンドラインから作業する文字列。

webpack.DefinePluginを使って正確に同じ結果を得ることができます（webpack 2のドキュメントをリンクしましたが、webpack 1でも同じです）。これにより、より複雑な置換を行うことができ、JSON.stringifyのようなユーティリティを使用して文字列バージョンを作成することもできます。

new webpack.DefinePlugin({ 
    API_TYPE: JSON.stringify(process.env.API_TYPE) 
}) 

をし、環境変数​​セットwithApiにして実行します：インスタンスは、コマンドラインから文字列を渡すの問題を克服するためには、使用することができます

API_TYPE=withApi webpack-dev-server --inline --hot 

、すべての​​が置き換えられます文字列が'withApi'の場合、それをまったく指定しないと、定義されません。

Answer 2

私はわからないんだけど、普段は別々的環境にこれを実行します。

コマンド：

NODE_ENV=development webpack-dev-server 

webpack.config.js（プラグイン）：

... 
plugins:[ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify('production') 
    } 
    }) 
] 
... 

メインjsファイル：

if(process.env.NODE_ENV !== 'production') { ... } 

---

私はWebPACKの-devのサーバーは、カスタムパラメータ、 を解析することができないと思いますが、あなたはこのような何か試すことができます。

コマンドを：

webpack-dev-server --customparam1=value 

webpack.config.js：

var path = require("path"); 
var webpack = require("webpack"); 

function findPara(param){ 
    let result = ''; 
    process.argv.forEach((argv)=>{ 
     if(argv.indexOf('--' + param) === -1) return; 
     result = argv.split('=')[1]; 
    }); 
    return result; 
} 

const customparam1 = findPara('customparam1'); 

module.exports = { 
    ... 
    plugins: [ 
     new webpack.DefinePlugin({ 
      customparam1:JSON.stringify(customparam1) 
     }) 
    ] 
}; 

メインのjsファイル：

if(customparam1 === xxx){ ... }