前言

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

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

下面指定了所有可用的配置選項(xiàng)。

使用不同的配置文件

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

package.json

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

設(shè)置一個(gè)新的 webpack 項(xiàng)目

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

npx webpack init

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

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