前言

webpack 開箱即用，可以無需使用任何配置文件。然而，webpack 會假定項目的入口起點為 ?src/index.js?，然后會在 ?dist/main.js? 輸出結(jié)果，并且在生產(chǎn)環(huán)境開啟壓縮和優(yōu)化。

通常你的項目還需要繼續(xù)擴展此能力，為此你可以在項目根目錄下創(chuàng)建一個 ?webpack.config.js? 文件，然后 webpack 會自動使用它。

下面指定了所有可用的配置選項。

使用不同的配置文件

如果出于某些原因，需要根據(jù)特定情況使用不同的配置文件，則可以通過在命令行中使用 ?--config? 標志修改。

package.json

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

設(shè)置一個新的 webpack 項目

Webpack 有大量的配置項，可能會讓你不知所措，請利用 webpack-cli 的 init 命令，它可以根據(jù)你的項目需求快速生成 webpack 配置文件，它會在創(chuàng)建配置文件之前詢問你幾個問題。

npx webpack init

如果尚未在項目或全局安裝 @webpack-cli/generators，npx 可能會提示你安裝。根據(jù)你在配置生成過程中的選擇，你也可能會安裝額外的 package 到你的項目中。

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