設定

デフォルトでは、webpackは設定ファイルの使用を要求しません。ただし、プロジェクトのエントリポイントは`src/index.js`と想定し、結果は`dist/main.js`に出力され、本番環境向けにミニファイされ最適化されます。

通常、プロジェクトではこの機能を拡張する必要があります。そのためには、ルートフォルダに`webpack.config.js`ファイルを作成すると、webpackが自動的にそれを利用します。

利用可能な設定オプションはすべて以下に記載されています。

異なる設定ファイルを使用する

何らかの理由で、状況に応じて異なる設定ファイルを使用したい場合は、コマンドラインで`--config`フラグを使用して変更できます。

package.json

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

新しいWebpackプロジェクトの設定

Webpackには膨大な数のオプションがあり、圧倒されるかもしれません。webpack-cliの`init`コマンドを利用して、プロジェクトの要件に合わせてWebpackの設定ファイルを迅速に生成することをお勧めします。設定ファイルの作成前にいくつかの質問に答える必要があります。

npx webpack init

プロジェクトにまだインストールされていない場合、またはグローバルにインストールされていない場合、npxは`@webpack-cli/generators`のインストールを促す場合があります。設定生成中に選択した内容に応じて、プロジェクトに追加のパッケージがインストールされることもあります。

$ npx webpack init

[webpack-cli] For using this command you need to install: '@webpack-cli/generators' package.
[webpack-cli] Would you like to install '@webpack-cli/generators' package? (That will run 'npm install -D @webpack-cli/generators') (Y/n)
devDependencies:
+ @webpack-cli/generators 2.5.0
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? CSS only
? Will you be using PostCSS in your project? Yes
? Do you want to extract CSS for every file? Only for Production
? Do you like to install prettier to format generated configuration? Yes
? Pick a package manager: pnpm
[webpack-cli] ℹ INFO  Initialising project...

devDependencies:
+ @babel/core 7.19.3
+ @babel/preset-env 7.19.4
+ autoprefixer 10.4.12
+ babel-loader 8.2.5
+ css-loader 6.7.1
+ html-webpack-plugin 5.5.0
+ mini-css-extract-plugin 2.6.1
+ postcss 8.4.17
+ postcss-loader 7.0.1
+ prettier 2.7.1
+ style-loader 3.3.1
+ webpack-dev-server 4.11.1
[webpack-cli] Project has been initialised with webpack!