webpack 官網(wǎng)：https://www.webpackjs.com/
目前的最新版本：webpack5

webpack 簡介

webpack 是基于模塊化的打包（構建）工具，它把一切視為模塊

它通過一個入口模塊為起點，分析出所有的依賴關系，然后經(jīng)過一系列的過程（壓縮、合并），最終生成運行時態(tài)的文件。

webpack 的特點：

• 為前端工程化而生：webpack 致力于解決前端工程化問題，特別是瀏覽器端工程化中遇到的問題，讓開發(fā)者集中注意力編寫業(yè)務代碼，而把工程化過程中的問題全部交給 webpack 來處理
• 簡單易用：支持零配置，可以不用寫任何一行額外的代碼就使用 webpack
• 強大的生態(tài)：webpack 是非常靈活、可以擴展的，webpack 本身的功能并不多，但它提供了一些可以擴展其功能的機制，使得一些第三方庫可以融于到 webpack 中
• 基于 nodejs：由于 webpack 在構建的過程中需要讀取文件，因此它是運行在 node 環(huán)境中的
• 基于模塊化：webpack 在構建過程中要分析依賴關系，方式是通過模塊化導入語句進行分析的，它支持各種模塊化標準，包括但不限于 CommonJS、ES6 Module

webpack 的安裝

webpack 通過可以 npm 安裝，它提供了兩個包：

• webpack：核心包，包含了 webpack 構建過程中要用到的所有 api
• webpack-cli：提供一個簡單的 cli 命令，它調用了 webpack 核心包的 api，來完成構建過程

安裝方式：

• 全局安裝：可以全局使用 webpack 命令，但是無法為不同項目對應不同的 webpack 版本

npm i -g webpack webpack-cli

• 本地安裝：推薦，每個項目都使用自己的 webpack 版本進行構建

npm i webpack webpack-cli -D

使用

webpack

直接在終端運行 webpack 命令，如果報錯:

終端執(zhí)行webpack報錯.png

這是因為 webpack 沒有全局安裝，而是作為項目的本地依賴安裝的,要解決這個問題，我們可以通過配置 npm 腳本，比如:

"scripts": {
     "build": "webpack --mode=production",
     "dev": "webpack --mode=development"
}

現(xiàn)在可以在終端中運行 npm run build 或者 npm run dev來構建項目了，這樣 webpack 就會從項目的 node_modules 目錄中加載，而不是從全局環(huán)境中尋找webpack，或者在沒有配置腳本的情況下我們也可以通過npx 來運行 webpack:

npx webpack --mode=development
或
npx webpack --mode=production

默認情況下，webpack會以./src/index.js作為入口文件分析依賴關系，打包到./dist/main.js文件中

通過--mode選項可以控制webpack的打包結果的運行環(huán)境，mode可以是以下某個值:
string = 'production': 'none' | 'development' | 'production'
這表示mode默認值為production,當取不同的值時webpack 會使用相應模式的內置優(yōu)化，這里借助官網(wǎng)的圖來說明:

mode不同值對應的內置優(yōu)化.png