webpack-cli を使い、コマンドラインから webpack.config.js を作成する方法です。
手作業で作成した場合の記入漏れなどを考えると、導入の手間はかかるものの @webpack-cli/init を使って作成した方が安全な気がします。
すでに node.js はインストールされているものとして話を進めます。
初めにコマンドライン上でwebpackを実行するためのツール webpack-cli をインストールします。
次にwebpack.config.js の作成に必要な @webpack-cli/init をインストールします。
npm install -D @webpack-cli/init
@webpack-cli/init がインストールできたら以下コードを実行し、webpack.config.js を作成します。
npx webpack-cli init
すると、以下のように対話形式で処理が進むため、必要な設定を指示。
設定に関する質問は6つです。
i INFO For more information and a detailed description of each question,
have a look at: https://github.com/webpack/web
pack-cli/blob/master/INIT.md
i INFO Alternatively, run "webpack(-cli) --help" for usage info
? Will your application have multiple bundles? y
? Which will be your application entry point? index
? In which folder do you want to store your generated bundles? y
? Will you use one of the below JS solutions? ES6
? Will you use one of the below CSS solutions? SASS
conflict package.json
? Overwrite package.json? overwrite
force package.json
create index.js
create README.md
それぞれの質問内容を確認します。
下記の公式レファレンスとは質問内容が少し異なっているようです。
webpack-cli/INIT.md at master · webpack/webpack-cli · GitHub
Will your application have multiple bundles?
アプリに複数のエントリポイントがあるかどうかを問われています。
複数のエントリポイントが必要な場合は、y(or yes) と答えます。
1つだけにしたい場合は、n(or no) と答えましょう。Which will be your application entry point?
アプリケーションのエントリポイントとなるファイル名を問われています。
これにより、webpack にアプリケーションのバンドルを開始するファイルを指示します。
デフォルトは src / index です。
これは、srcという名前のフォルダー内でindexというファイルを検索するようwebpackに指示します。In which folder do you want to store your generated bundles?
生成されたバンドルをどのフォルダに保存するかを問われています。
このフォルダはバンドルされたアプリケーションがある場所を指します。
index.html は、通常 distという名前のフォルダから生成されたバンドルを読み取ります。Will you use one of the below JS solutions?
ES6、Typescript、いずれの JavaScript を使用するか選択します。
No は上記どちらも使わない場合に選びます。Will you use one of the below CSS solutions?
CSS、SASS、LESS、PostCSS、いずれを使用するか選択します。
No は上記どれも使わない場合に選びます。-
Overwrite package.json?
@webpack-cli/init には package.json の自動作成機能もあります。
そのため、すでに package.json が存在する場合、以下6項目から回答を求められます。
npm initで package.json を作成済みの場合は「y」を選択します。- y) overwrite
- n) do not overwrite
- a) overwrite this and all others
- x) abort
- d) show the differences between the old and the new
- h) Help, list all options
以上の質問を経て処理が進むと最終的に以下が表示され、プロジェクトディレクトリ内にwebpack.config.json が作成されます。
Congratulations! Your new webpack configuration file has been created!
You can now run npm run start to run your project!