web-dev-qa-db-ja.com

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

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

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

私が達成しようとしていることは、私がビューローダーアプリケーションに取り組んでいるということです。アプリケーションには、データをフェッチする特定のサービスがあります。

APIサーバーとして機能する別のアプリケーションがあります。アプリケーションを2つの方法で実行する必要があります(チームのすべてのメンバーがAPIサーバーにアクセスできないため)

したがって、このサービスにはデータを取得する2つの方法があります。

1)APIサーバーが実行されている場合(開発チーム向け)、http呼び出しを使用してlocalhostからデータを取得します

2)APIサーバーが実行されていない場合(設計チームの場合)、サービスに既に存在する静的データを使用します。

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:私はwebpack 1.12.1を使用しています

14
rahulserver

更新:2020/2/16

1. webpack ^ 4

Webpack4または最新のものを使用している場合は、 環境変数 を使用すると非常に便利です。

Webpackコマンドライン環境オプション--envを使用すると、必要な数の環境変数を渡すことができます。環境変数は、webpack.config.jsでアクセス可能になります。たとえば、-env.productionまたは--env.NODE_ENV = local(NODE_ENVは従来、環境タイプを定義するために使用されます。ここを参照してください。)

たとえば、コマンドは次のようになります。

_env.NODE_ENV=development webpack-dev-server_

Webpack.config.js内で、new webpack.DefinePlugin()内にenv変数を定義して、アプリで使用できるようにすることができます。

webpack.config.js :(プラグイン)

_// pass the env and return the webpack setting
module.exports = env => {  
  console.log(env);

  return {
    ....
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.pug",
        inject: false
      }),
      new webpack.DefinePlugin({ customparam1: JSON.stringify(env.customparam1) })
    ],

        }
      ]
     ....
    }
  };
};


_

2. create-react-app

React-create-app doc を確認してください。変数は_REACT_APP__で始まります

コマンド:_REACT_APP_CUSTOM_VARIABLE=234 npm run dev_

アプリ:

console.log(process.env.REACT_APP_CUSTOM_VARIABLE) // 234

3.古い答え

コマンド:

_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){ ... }
_
9
AppleJam

--defineオプションを使用できます。これは、var=valueを引数として使用します。 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)
})

そして、環境変数API_TYPEwithApiに設定して実行します。

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

そして、すべてのAPI_TYPEは文字列'withApi'に置き換えられます。まったく指定しない場合は、未定義になります。

5
Michael Jungo

webpack-dev-server --customparam1=valueは機能しません。既知の引数のみがwebpack-dev-serverで許可されています。

ただし、関数として返された場合、(環境変数ではなく)環境パラメーターをwebpack構成に渡すことができます。

次のようなコマンドラインパラメータ--env.param=value

webpack-dev-server --env.param=value

次のようにwebpack.config.jsで利用できます。

module.exports = env => {
  console.log(env.param)
  return {
    // normal webpack config goes here, as e.g.
    entry: __dirname + "/src/app/index.js",
    output: {
      // ...
    },
    module: {
      // ...
    },
    plugins: [
      // ...
    ] 
    // ...
  }
}

このようなパラメーターは、@ AppleJamの回答で上記で概説したように、webpack.DefinePluginを使用してアプリに渡すことができます。

1

webpack.config.js関数として設定をエクスポート (オブジェクトの代わりに)の場合、提供されたオプションに簡単にアクセスできます。

module.exports = (env, argv) => {
    const customparam1 = argv.customparam1;
    // ...
}

webpack docs

関数は2つの引数で呼び出されます。

  • 環境[...]
  • オプションマップ(argv)[...](これは)webpackに渡されるオプションを記述します

あなたが提供する場合:

webpack-dev-server --customparam1=true --customparam2=42

typeof argv.customparam1  // string
typeof argv.customparam2  // number
1
ellockie

とにかく、カスタムパラメータを渡すことはwebpack-dev-serverでは許可されていません。

ただし、--env --define --openなどの既存のパラメーターを使用して、独自の値を渡すことができます。

書くだけ:

webpack-dev-server --env=someparams

次に、 yargs を使用してパラメーターを読み取ることができます。

できた!

0
Cai Wenlie