組態

預設情況下，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

如果專案或全域尚未安裝 @webpack-cli/generators，npx 可能提示您安裝。您也可能會根據設定產生期間所做的選擇，在您的專案中安裝其他套件。

$ 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!