私は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コマンドがあります。ただし、このコマンドは機能していないか、または何もしていないようです。自分のプロジェクトのルートディレクトリからこれを実行しようとしても、何もしません(スクリーンショット参照)。
私が間違っていることを教えてください!
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
を入れることができます。
npm i webpack -g
webpackをあなたのシステムにグローバルにインストールし、それをターミナルウィンドウで利用可能にします。
私は自分のローカルバージョンのwebpackで動くようにするためにwebpackを再インストールしなければなりません、例えば:
$ npm uninstall webpack
$ npm i -D webpack
npx webpack
を実行することができます。 Node 8.2/npm 5.2.0以降で出荷されているnpxコマンドは、webpackパッケージのwebpackバイナリ(./node_modules/.bin/webpack)を実行します。情報源: https://webpack.js.org/guides/getting-started/
-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
これをローカルで機能させるために、次のようにしました。
このアプローチの問題点は、あなたが持っている各プロジェクトへのリンクを維持しなければならないということです。 -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コマンドが見つからないのでエラーになるでしょう
最も簡単な方法は、これを機能させるためだけに、別の場所からWebパックを使用することです。これにより、グローバルにインストールする必要がなくなります。またはnpm run webpack
が失敗した場合。
Npmでwebpackをインストールすると、あなたのプロジェクトの "node_modules\.bin
"フォルダの中に入ります。
コマンドプロンプトで(管理者として)
"C:\Users\..\ProjectName\node_modules\.bin\webpack" --config webpack.config.vendor.js