webpack是我們前端開發人員很好用的一個打包工具 因為它支援一鍵打包，以及一些命令也很人性化。目的是將所有的檔案 整合與一個js檔案 避免二次請求 對伺服器減壓

直接走入正題吧。
第一步
首先 新建一個資料夾 資料夾一定不能為中文 否則會出現一些未知的錯誤，這個坑我已經踩過了~~ 直接給個語義化最強的名字吧 就叫webpack好了
然後在裡面建兩個資料夾 一個src 用於放我們寫好的頁面 以及一些js檔案 css樣式
第二個資料夾dist 用於存放打包好的檔案

第二步 初始化
執行npm命令 npm init -y 快速初始化 然後會在根目錄生成一個package.json的檔案

第三步 本地安裝webpack以及webpack依賴的包
1: 使用yarn add webpack -D 本地安裝webpack包 （注意：這裡如果用npm i webpack -D安裝本地包的話 可能會報錯 安裝不上去 建議使用yarn命令安裝本地 全域性包使用npm命令進行安裝）

2: 使用 npm i webpack-cli -D 本地安裝webpack-cli 這個包 webpack依賴於這個包 如果安裝成功了 在package.json檔案中的 devDependencies 物件當中會有這兩個檔名稱

第四步 在src資料夾裡面建立一個頁面 和一個js檔案

HTML首頁

**建立一個webpack.config.js配置檔案檔案 **

在根目錄建立一個wenpack.config.js檔案 看圖示也許已經猜到了 這並不是一個js檔案，
它是webpack的一個配置檔案 當我們沒有手動輸入指定打包到哪個路徑的時候 則會到這裡面來找
配置如下 ：

entry: 這裡寫需要打包的路徑，檔案
output: 這裡的path寫需要打包到哪個資料夾 filename是指定生成的打包完成的名字
約定打包的js檔名字叫做 bundle.js
然後通過mode: 指定模式 development是開發者模式 就是打包的檔案沒有壓縮過的
還有一個是專案上線時候的模式 單詞是啥我也忘記了 具體可以百度

這些都弄好之後 我們可以在終端中直接輸入 webpack 然後就一鍵打包了 在index.html頁面引入 打包好的js檔案就可以了

回車輸入
成功的話 如下圖

這個時候 我們開啟頁面看看

ok 成功了

但是 每次更新的時候 都需要重新打包 手動重新整理頁面 作為一個程式設計師 自然是不願意幹這些無意義的瑣事 不可能的 這輩子都不可能的

接下來就是重點了

通過npm i webpack-dev-server -D讓頁面執行在服務端 並且自動更新
npm i webpack-dev-server -D 在本地安裝這個包 會把index.js生成在記憶體中
可以直接用script引入記憶體中的包 本地磁碟的包可以不裝都ok
安裝好了之後 在package.json 裡面的script物件 定義一個dev 把包名寫上去
"webpack-dev-server " 這樣就可以通過命令執行這個包了 因為包名過長 不能直接執行
所以需要在這裡定義一下 後面的–open 代表是服務啟動 自動開啟網頁 --contentBase 代表開啟哪個指定的資料夾 --hot 可以起到自動重新整理頁面的作用 當我們一更改程式碼 儲存之後 被webpack-dev-server 監聽到了之後 就會自動重新整理頁面 有了這幾個命令之後 讓我們少做了很多事情 …

配置好了之後 在終端執行 npm run dev 會自動開啟執行在伺服器的頁面 頁面跟之前一樣

關於在webpack裡面引入css less 樣式問題
預設 webpack是不支援打包js以外的檔案 這個時候需要在另外安裝兩個包
1: css-loader 2: style-loader 兩個包 安裝方式還是和之前一樣 安裝到本地
可以直接一次性安裝多個包 包名中間用空格隔開
命令： npm i style-loader css-loader -D
這些包不需要再次引入
安裝好了直接在index.js匯入寫好的css樣式 如圖

到這裡還沒完 ------
接下來我們要到webpack-config-js裡面去配置一些內容
與mode 平級 一個module物件 配置如下 裡面放一個rules陣列
裡面放物件 test表示正則匹配指定的字尾名 use表示用到的哪些規則

當然 也不支援 圖片 URL地址 這個時候 我們又需要安裝一個loader
在終端執行命令 npm i url-loader file-loader -D
url-loader依賴於file-loader 所以直接一起裝了

然後在去webpack.config.js 裡面配置一下
跟css配置同級

基本的安裝與使用大概就這麼多吧

-------------------------------在更兩個常見的錯誤吧
如果出現了某某檔案 不是內部命令 或者可執行的檔案 如下圖：
這種情況 一般是之前的包可能被刪了
在package.json 裡面有記錄之前裝過這個檔案，但是不代表現在還有這個檔案
這個時候直接把node_modules 這個包刪了 然後執行npm i 命令 會把所有記錄在package.json裡面的檔案全部安裝好

**還有就是 記住 json檔案裡面一定不能寫註釋 **