webpackは、内部または外部のコマンド、操作可能なプログラムまたはバッチファイルとして認識されません

React.jsを学習していますが、Windows 8 OSを使用しています。ルートフォルダに移動しました

1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.

webpackは、内部または外部のコマンド、操作可能なプログラムまたはバッチファイルとして認識されません

私もこの問題を長い間抱えていました。（グローバルにインストールされたwebpackなどですが、まだ認識されていません）npmの環境変数を指定していないことがわかりました（ファイルwebpack.cmdはここにあります）。そのため、Path変数に追加します

%USERPROFILE%\AppData\Roaming\npm\

Powershellを使用している場合は、次のコマンドを入力して、パスに効果的に追加できます。

[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")

重要：これを適用するには、PowerShellウィンドウを閉じてから再度開くことを忘れないでください。

それが役に立てば幸い。

この問題のより良い解決策は、Webpackグローバルにインストールすることです。

これは常に機能し、私にとってはうまくいきました。以下のコマンドを試してください。

npm install -g webpack

別の方法として、Webpackがローカルにインストールされている場合は、次のように、コマンドプロンプトがWebpackを探す場所を明示的に指定できます。

node_modules\.bin\webpack

（これは、あなたがと一緒にディレクトリ内にいて、package.jsonすでに実行していることを前提としていますnpm install webpack。）

npm install -g webpack-dev-server あなたの問題を解決します

ローカルディレクトリのnode_modulesを削除して、npm installを再実行してください。

package.jsonにnpmスクリプトとしてwebpackコマンドを追加します。

{
    "name": "react-app",
    "version": "1.0.0",
    "scripts": {
      "compile": "webpack --config webpack.config.js"
    }
}

次に実行します

npm run compile

Webpackがインストールされると、。/ node_modules / .binフォルダーにバイナリーが作成されます。npmスクリプトは、このフォルダーに作成された実行可能ファイルも検索します

Webpack CLIは別のパッケージになりました。「webpack」コマンドを使用するには、グローバルにインストールする必要があります。

npm install -g webpack-cli

編集：多くが変更されました。Webpack担当者は、CLIをグローバルに（または個別に）インストールすることをお勧めしません。この問題は修正されているはずですが、適切なインストールコマンドは次のとおりです。

npm install --save-dev webpack

この回答は、もともとOPの問題の「回避策」として意図されていました。

同じ範囲にwebpackとwebpack-cliをインストールする必要があります。

npm i -g webpack webpack-cli

または、

npm i webpack webpack-cli

ローカルにインストールする場合は、具体的に呼び出す必要があります

node_modules/.bin/webpack -v

私たちはこの問題も経験しました。私は、で定義されたスクリプトを使用することを提案するすべての回答が気に入っていますpackage.json。

私たちのソリューションでは、多くの場合、次のシーケンスを使用します。

1. npm install --save-dev webpack-cli（webpack v4以降を使用している場合はnpm install --save-dev webpack、それ以外の場合はを使用します。webpackのインストールを参照してください、2019年1月19日取得）
2. npx webpack

ステップ1は1回限りです。ステップ2もチェックします./node_modules/.bin。package.jsonたとえば、2番目のステップをnpmスクリプトとして追加することもできます。

{
   ...
   "scripts": {
      ...
      "build": "npx webpack --mode development",
      ...
   },
   ...
}

次に、を使用npm run buildしてこのスクリプトを実行します。

Windows 10でnpmバージョン6.5.0、webpackバージョン4.28.4、webpack-cliバージョン3.2.1を使用してこのソリューションをテストし、PowerShellウィンドウ内ですべてのコマンドを実行しました。私のnodejsバージョンは10.14.2でした。Ubuntu Linuxバージョン18.04でもテストしました。

特に、それぞれに異なるバージョンのwebpackが必要になる可能性のある多くの異なるプロジェクトで作業している場合は、webpackをグローバルにインストールしないことをお勧めします。webpackをグローバルにインストールすると、同じマシン上のすべてのプロジェクトで特定のバージョンにロックされます。

クリーンインストールで問題が解決する場合があります。この「コマンド」は以前のモジュールをすべて削除して再インストールしますが、おそらくwebpackモジュールのダウンロードとインストールが不完全です。

npm clean-install

同じ問題があり、コードブロックをpackage.jsonファイルに追加しました。

 "scripts": {
   "build": "webpack -d --progress --colors"
 }

そして、ターミナルでコマンドを実行します。

npm run build

WebPackをグローバルにインストールする

npm install --global webpack

管理者としてコマンドライン（cmd）を実行するだけです。

リポジトリをクローンしたばかりの場合は、最初に実行する必要があります

npm install

プロジェクトの依存関係がない場合、取得エラーが生成されます。上記のコマンドはそれらをダウンロードしてインストールします。

npx webpack

それは私のために働いています。Windows 10を使用していて、ローカルにwebpackをインストールしました。

React 16.12.0にアップグレードするときにこの問題が発生しました。

DOMをレンダリングするときに、webpackとストアに関する2つのエラーが発生しました。

Webpackエラー：

webpackは、内部または外部のコマンド、操作可能なプログラムまたはバッチファイルとして認識されません

Webpackソリューション：

1. 関連するVSソリューションを閉じる
2. node_modulesフォルダを削除
3. 削除しました package-lock.json
4. npm install
5. npm rebuild
6. これを2〜3回繰り返しました

ストアエラー：

タイプStore <（）>はタイプStore <any、AnyAction>に割り当てることができません

ストアソリューション：

私のReactバージョンを更新する提案では、このエラーは修正されませんでしたが、それを行うことをお勧めします。

私のコードは次のようになりました：

ReactDOM.render(
        <Provider store={store as any}>
            <ConnectedApp />
        </Provider>,
        document.getElementById('app')
    );

このソリューションに従って

私は同じエラーを受け取りました、解決策のどれも私のために機能しませんでした、私はノードを再インストールして私の環境を修復しました、すべてが再び機能します。

私にとっては、webpackを個別にインストールすることができました。だから単純に：

$npm install
$npm install webpack

なぜこれが必要なのかはわかりませんが、うまくいきました。

この以下のコマンドは私にとってはうまくいきました。

npm cache clean --force
npm install -g webpack

注 -これらのコマンドは管理者として実行してください。インストールしたら、コマンドプロンプトを閉じて再起動し、適用された変更を確認します。

JSモジュール用のボイラープレートフォルダーを作成して、JSモジュールを使用できるようにするwebpackとBabel、すばらしいツールになります。

webpackグローバルにインストールしないでください。両方の最新バージョンをインストールすると、package.jsonファイルが読み込まれ、将来のプロジェクトでコピーできるようになります。

必ずnode_modulesフォルダーを削除して、ボイラープレートフォルダー内のファイルサイズを小さくしてから、node_modulesを再インストールしてくださいnpm install。

npm installを実行するのを忘れて、webpack dev-serverを実行しようとnpm installするnode_modulesと、インストールのために実行する必要があることに気づき、それが機能するまで、このエラーが発生し続けました。

この人々を試してください、cliを最新バージョンに更新する必要があります

npm install --save-dev @angular/cli@latest

クレジットはR.Richardsに行き ますhttps://stackoverflow.com/a/44526528/1908827

私の修正は、devDependencyとしてローカルにwebpackをインストールすることでした。私はそれを持っているが、devDependenciesそれはnode_modulesフォルダにインストールされていません。だから私は走った npm install --only=dev

時にはNPM -g WebPACKのインストールを正常に保存されません。npm install webpack --saveを使用することをお勧めします。それは私のために働いた。

これと同じ問題があり、理解できませんでした。コードのすべての行を調べましたが、エラーを見つけることができませんでした。その後、間違ったフォルダにwebpackをインストールしたことに気付きました。私のエラーは、webpackをインストールするフォルダーに注意を向けていませんでした。