前言
webpack是當前前端專案中最常用的資源構建工具，從本文開始，來總結記錄一下關於webpack的學習。
正文
1、webpack簡介
webpack官網（https://webpack.docschina.org/）
我們程式碼中使用less，ES6的impot以及一些高階的語法，瀏覽器無法識別，因此webpack解決了這個問題，它是一種前端的資源構建工具，同時也是一個靜態的模組打包器。在webpack看來，前端的所有資原始檔（js/img/css/less）都會作為模組處理，他會根據模組的依賴關係進行靜態分析，打包生成對應的靜態資源。我的理解就是，要完成這些首先要告訴weback的一個入口起點，然後根據這些依賴關係，形成一個程式碼塊，這個程式碼塊就叫chunk，然後根據這個chunk進行不同的處理，這一過程叫打包，打包之後，輸出出來的檔案叫 bundles。
（1）Entry
入口，指示webpack以哪個檔案為入口起點開始打包，但是打包之前需要分析清模組之間的依賴關係圖。
（2）Output
輸出，指示webpack 打包後的資源 bundles 輸出到哪裡，以及如何命名。
（3）Loader
Loader,指示webpack能夠處理那些非 js 檔案，可以理解 webpack 本身只能處理一些 js 檔案，一旦處理樣式檔案，圖片檔案這些就會報錯或處理不了。它就類似一個翻譯官的角色。
（4）Plugins
外掛，用於執行一些範圍更廣的任務，比如打包優化和壓縮，一直到重新定義環境變數等。
（5）Mode
模式（process.env.NODE_ENV），development開發模式，能讓程式碼在本地除錯執行的環境。
production 生產模式，能讓程式碼優化上線的執行環境。
3、webpack 安裝及初體驗
前提：node環境 npm安裝成功
全域性安裝：npm install -g webpack npm i -g webpack-cli
本地安裝：npm install webpack -D npm i webpack-cli -D
注意：在安裝webpack的時候，如果報錯如下，是自己的專案名package.json中的name值設定成了webpack
初體驗，建立專案，通過 cmd 中輸入 npm init 指令初始化專案，這裡要注意 package.json 的 name 值問題，然後在本地安裝依賴 npm i webpack-cli -D 和 npm install webpack -D ,建立src目錄，在下面建立（index.js，index.css，data.json），index.js檔案為專案入口檔案，並分別測試css檔案，json資原始檔，程式碼如下：
index.js
// 普通js程式碼 function add(x,y){ return x + y } console.log(add(1,2)); // json資源 import data from "./data.json" console.log(data); // 引入css資源 // import "./index.css"
index.css
body{ padding: 0; background-color: pink; }
data.json
{
"name":"name",
"age":18
}
分別測試下面的指令：
開發環境指令：webpack ./src/index.js -o ./build --mode=development。以 ./src/index.js 為入口 ,./build 為輸出，整體打包環境是開發環境。
生產環境指令：webpack ./src/index.js -o ./build --mode=production。以 ./src/index.js 為入口 ,./build 為輸出，整體打包環境是生產環境。
經測試得出結論如下：
（1）webpack能處理 js 資源，json 資源,不能處理 css 、html、和 img 資源，打包過程會報錯：Module parse failed: Unexpected token (1:4)
（2）生產環境比開發環境多了壓縮js程式碼，生產環境和開發環境將es6 模組編譯成瀏覽器能識別的模組
4.webpack打包樣式資源
（1）引入css樣式資源-----css-loader 和 style-loader
首先將index.js中的css引入程式碼註釋放開
命令列執行npm i style-loader css-loader -D 命令安裝開發依賴
在專案最外層建立webpack.config.js 檔案，該檔案為webpack配置檔案，插入如下程式碼
// resolve用來拼接絕對路徑的方法 const { resolve } = require("path"); module.exports = { //入口檔案 entry: "./src/index.js", // 輸出 output: { // 輸出檔名 filename: "build.js", // 輸出路徑 // __dirname 是node.js的變數，代表當前檔案的目錄的絕對路徑 path: resolve(__dirname, "build"), // 代表輸出到當前目錄下建立的build資料夾下 }, // loader的配置 module: { rules: [ // 詳細的loader配置 { test: /\.css$/, //匹配.css結尾的檔案 use: [ // 使用哪些loader進行處理，use陣列中的執行順序是從後往前 //建立一個style標籤，將js中的樣式資源插入進去，新增到head中生效 "style-loader", // 將css檔案程式設計commonjs模組載入在js中，裡面內容是樣式字串 "css-loader", ], }, ], }, //plugin的配置 //plugins: [],// 這裡要注意，裡面沒有配置的時候要註釋掉，否則會報錯 // 模式 mode: "development", // 開發模式 // mode:"production"// 生產模式 };
然後執行命令 webpack即可，然後會發現控制檯
接下來需要，測試引入樣式是否成功，需要在build檔案下建立index.html檔案，並在其中引入打包之後生成的build.js，然後再瀏覽器開啟該html檔案。
（2）引入less樣式資源-----less-loader
按照css資源的方式，建立index.less檔案，寫入樣式，然後在index.js中引入，再次執行wbepack命令，發現報錯如下：
{ test: /\.less$/, //匹配.less結尾的檔案 use: [ "style-loader", "css-loader", "less-loader"// 將less檔案變異成css檔案 ], },
同樣執行 webpack 命令
測試less打包成功方法同css。
5、webpack打包html檔案----html-webpack-plugin
前面解決了樣式資源的打包，都用到了 loader 來處理，都需要下載依賴，然後在loader中配置，而處理htm資源，就需要用到 plugins，需要首先下載依賴，然後 webpack 引入，最後在 plugins 中配置，如下：
同樣建立 index.html 檔案。
首先，下載 html-webpack-plugin : npm i html-webpak-plugin -D
然後webpack.config.js 中引入
const HtmlWebpackPlugin = require("html-webpack-plugin")
最後在plugins中配置：
//plugin的配置 plugins: [ new HtmlWebpackPlugin() ],
plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", }), ],
這就相當於複製了index.html檔案，並自動引入打包生成的所有資原始檔。
6、webpack打包圖片資源----url-loader 和 file-loader
由於在webpack對html檔案進行打包的時候會使用我們設定的html模板，因此我們在html檔案中引入img檔案無法測試對圖片資源的打包，所以這裡需要通過樣式資源引入的方法來測試打包圖片資源。
這裡新建一個img資料夾，然後新增一張圖片，在index.css檔案中修改如下程式碼，並把css檔案引入在index.js中
body{ padding: 0; background-image: url(./img/webpack.jpg); background-repeat: repeat; }
然後安裝依賴：npm i url-loader file-loader -D
// 這種方式無法處理html檔案中的圖片 { test:/\.(jpg|png|gif)$/, loader:"url-loader", options:{ // 圖片大小小於8kb,會被解析為base64處理,優點減少請求數量減輕伺服器壓力，缺點是圖片體積更大，檔案請求速度更慢 limit:8*1024 } }
執行webpack打包命令，發現打包成功。
打包生成檔案如下：發現圖片的名字發生了變化（將圖片修改成了對應的hash值）。
首先在html檔案中寫入
<img src="./img/webpack1.jpg" alt="" />
然後下載依賴： npm i html-loader -D
{ test: /\.(jpg|png|gif)$/, loader: "url-loader", options: { // 圖片大小小於8kb,會被解析為base64處理,優點減少請求數量減輕伺服器壓力，缺點是圖片體積更大，檔案請求速度更慢 limit: 8 * 1024, esModule: false, // 這樣可以修改圖片名稱，[hash:10]表示取hash值的前十位，[ext]表示原副檔名 // name: "img/[hash:8].[name].[ext]", }, }, { // 因為url-loader預設適用了es6模組解析，而html-loader 引入圖片適用commonJS處理，解析時會出現[object Module],需要關閉url-loader的es6模組化解析 test: /\.html$/, // 處理html 檔案的img檔案 loader: "html-loader", },
然後執行webpack命令，打包成功
對應的html檔案中的img路徑也發生了變化
7、打包其他資源---- file-loader
這裡主要指其他不需要做任何優化之類的資源，這裡以字型圖示為例（https://www.iconfont.cn/），這裡選擇一個購物車圖示，選擇下載程式碼.，
下載檔案並解壓，開啟index.html檔案，會有使用圖示的方法介紹，這裡使用Unicode 引用
第一步：拷貝專案下面生成的 @font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.ttf?t=1637326208397') format('truetype'); }
第二步：定義使用 iconfont 的樣式
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
第三步：挑選相應圖示並獲取字型編碼，應用於頁面
<span class="iconfont">3</span>
操作：首先在src檔案下建立一個icont的資料夾，把下載的 iconfont.ttf 檔案複製到資料夾下，然後把第一二步的程式碼複製到index.css檔案，把第三步的程式碼複製到index.html 中，最後配置loader
{// 打包其他資源（除了css,js,html資源以外的資源）
exclude:/\.(css|js|html)$/,
loader:"file-loader"
}
執行webpack命令打包結果如下：
寫在最後
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。
