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を使用しています

webpackecmascript-6webpack-dev-servervue-loader
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_TYPEをwithApiに設定して実行します。

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
Remigius Stalder

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