npmはNode.jsでパッケージを管理するツール。webpackはパッケージの1つ。npmでwebpackをインストールして使う。
webpackはモジュールバンドラー。モジュールをバンドルするツール。複数のモジュールの依存関係を解決して1つにまとめるためのツール。
Node.jsのモジュール（ライブラリ）はimportとexportにより複雑な依存関係を持っている。またNode.jsのモジュールは、サーバサイド用なのでそのままウェブブラウザ用として使うことができない。webpackはこれをウェブブラウザでも使えるようにしてくれる（バンドルしてくれる）魔法のツール。
webpack利用するための準備（npmはインストールされている前提）
- プロジェクト用ディレクトリを作る。
ディレクトリ内は空。 - terminalでプロジェクト用ディレクトリに移動する。
- 初期化する。
npm init
./
└ package.json
package.jsonが作成され、プロジェクトの情報が記述される（入力する）。 - モジュールをインストールする（webpackはモジュールの一つ）。
npm install webpack webpack-cli
./
├ node_modules/
├ package-lock.json
└ package.json
node_modules/が作成され、そこにモジュールがインストールされる。
package-lock.jsonが作成され、モジュールの依存関係が記述される。
依存するモジュールもすべてインストールしてくれる。 - その他必要なモジュールもインストールする。
- dist/、src/、src/modules/を作成する。
./
├ dist/
├ node_modules/
├ src/
│ └ modules/
├ package-lock.json
└ package.json
dist/にはwebpackでバンドルされたファイルが作成される。
src/には開発するスクリプトを収める。
src/modules/は別の名前でも良いと思われるがお作法としてmodulesという名前にする。自分で作るモジュールを格納する。 - src/index.jsを作る。
./
├ dist/
├ node_modules/
├ src/
│ ├ modules/
│ └ index.js
├ package-lock.json
└ package.json
スクリプト本体。ここに記述された内容からスクリプトを作成する。 - webpack.config.jsを作る。
./
├ dist/
├ node_modules/
├ src/
│ ├ modules/
│ └ index.js
├ package-lock.json
├ package.json
└ webpack.config.js
必須ではないが、バンドルオプションを記述しておくとバンドル時に引数でオプションを与える必要がなくなる。
webpack.config.jsは自分で記述する必要がある。記述方法はGoogle等で検索。