web-dev-qa-db-ja.com

webpackコマンドが機能しない

私はNode JとWebpackが初めてです。私はモジュールローダーでプロジェクトを始めようとしました。

最初に、nodeJsとNPMをインストールし、tutorialという新しいディレクトリを作成しました。私はこのディレクトリにcdするためにコマンドプロンプトを使い、それから次のコマンドnpm initを実行し、それから以下のコマンドを使ってnpmを通してwebpackをインストールしました：

npm install -S webpack

最初のコマンドは 'node-modules'ディレクトリの下のプロジェクトにwebpackをローカルにインストールしました、そして私はこれをすることによって私のプロジェクトを実行することができます：

nodejs node-modules/webpack/bin/webpack.js

これに関する問題は、私のwebpack.config.jsファイルを私のプロジェクトルートに置きたいこのディレクトリの中に置かなければならないということです。

この問題を解決する1つの方法は、以下のコマンドを使用してwebpackを自分のマシンにグローバルにインストールすることでした。

npm install -g webpack

これでWebpackがインストールされ、今度はWebpackコマンドがあります。ただし、このコマンドは機能していないか、または何もしていないようです。自分のプロジェクトのルートディレクトリからこれを実行しようとしても、何もしません（スクリーンショット参照）。

enter image description here

私が間違っていることを教えてください！

node.jsubuntunpmwebpack
50
Mohan

webpackはnode-modules/webpack/bin/ディレクトリにあるだけでなく、node_modules/.binにもリンクされています。

Npmが実行ファイルをインストールするフォルダを取得するためのnpm binコマンドがあります。

あなたはあなたのpackage.jsonのscriptsプロパティを使ってエクスポートされるこのディレクトリからのwebpackを使うことができます。

"scripts": {
  "scriptName": "webpack --config etc..."
}

例えば：

"scripts": {
  "build": "webpack --config webpack.config.js"
}

あなたはそれからそれを実行することができます：

npm run build

あるいは引数があっても：

npm run build -- <args>

これにより、webpackをグローバルにインストールしたり、webpackの設定をwebpack.config.jsフォルダに入れなくても、あなたのプロジェクトのルートフォルダにnode_modulesを入れることができます。

90
HiDeo
npm i webpack -g

webpackをあなたのシステムにグローバルにインストールし、それをターミナルウィンドウで利用可能にします。

12
user6922299

私は自分のローカルバージョンのwebpackで動くようにするためにwebpackを再インストールしなければなりません、例えば：

$ npm uninstall webpack
$ npm i -D webpack
5
mythz

npx webpackを実行することができます。 Node 8.2/npm 5.2.0以降で出荷されているnpxコマンドは、webpackパッケージのwebpackバイナリ（./node_modules/.bin/webpack）を実行します。情報源： https://webpack.js.org/guides/getting-started/

4
Andrei Bacescu

-gオプションを使用してwebpackをインストールすると、webpackは次のフォルダにインストールされます。

C：\ Users\<。profileusername。>\AppData\Roaming\npm\node_modules

webpack-cliおよびwebpack-dev-serverと同じ

グローバルnode_modulesの外側には、webpackがコマンドラインから実行されるためのリンクが作成されます。

C：\ Users\<。profileusername。>\AppData\Roaming\npm

これをローカルで機能させるために、次のようにしました。

  1. グローバルnode_modulesのwebpackフォルダの名前を_oldに変更
  2. プロジェクト内でローカルにインストールされたWebパック
  3. コマンドlink webpack.cmdを編集し、webpack.jsが自分のアプリケーション内の自分のローカルのnode_modulesフォルダを探すように指示しました。

このアプローチの問題点は、あなたが持っている各プロジェクトへのリンクを維持しなければならないということです。 -gオプションを指定してインストールする場合は、webpackコマンドを実行するためにコマンドラインエディタを使用しているので、これ以外の方法はありません。

そのため、proj1、proj2、proj3のすべてにローカルのnode_modulesとローカルのwebpackをインストールした（インストール時に-gを使用しない）場合は、単にwebpackの代わりに非汎用のリンク名を作成する必要があります。

ここでの例は、webpack_proj1.cmd、webpack_proj2.cmdおよびwebpack_proj3.cmdを作成し、各cmdで上記の2と3の手順に従うことです。

シモンズ：これらの変更であなたのpackage.jsonを更新することを忘れないでください。そうしないとwebpackコマンドが見つからないのでエラーになるでしょう

0
peacemaker

最も簡単な方法は、これを機能させるためだけに、別の場所からWebパックを使用することです。これにより、グローバルにインストールする必要がなくなります。またはnpm run webpackが失敗した場合。

Npmでwebpackをインストールすると、あなたのプロジェクトの "node_modules\.bin"フォルダの中に入ります。

コマンドプロンプトで（管理者として）

  1. webpack.config.jsが配置されているプロジェクトの場所に移動します。
  2. コマンドプロンプトで次のように書きます。
"C:\Users\..\ProjectName\node_modules\.bin\webpack" --config webpack.config.vendor.js
0
Joshua Duxbury