1. webpack基本概念

1. webpack： JavaScript 應用程序的靜態(tài)模塊打包器，是目前最為流行的JavaScript打包工具之一。
2. webpack會以一個或多個js文件為入口，遞歸檢查每個js模塊的依賴，從而構建一個依賴關系圖，然后依據(jù)該關系圖，將整個應用程序打包成一個或多個bundle。
3. webpack是用nodejs編寫，所以它依賴的運行環(huán)境就是nodejs。也正因為這一點，webpack只能識別JavaScript，所有非JavaScript（包括HTML，CSS，Typescript等）編寫的文件都需要經(jīng)過處理，這是借助對應的loader實現(xiàn)的。
4. webpack使用的是nodejs默認的模塊系統(tǒng)：commonjs，借助nodejs提供的API來操作待打包項目的源文件（如fs模塊、path模塊等）。webpack將這些文件整合壓縮后，輸出到一個特定的目錄下（通常是dist）。處理過的dist一般會被直接上傳到靜態(tài)資源服務器使用。

2. 使用webpack原因

1. 未打包的項目通常體積龐大，文件數(shù)量眾多。如果將其直接上傳到服務器，用戶訪問網(wǎng)站時，瀏覽器會發(fā)送大量的http請求來下載這些文件，這會給服務器帶來很大的壓力，同時客戶端的體驗也非常不好。
2. 瀏覽器本身不支持任何模塊系統(tǒng)。因此，使用模塊系統(tǒng)開發(fā)出的JavaScript代碼無法直接在瀏覽器中運行，而模塊系統(tǒng)對現(xiàn)代JavaScript開發(fā)是非常重要的。這樣，我們需要有一個工具，將模塊系統(tǒng)編寫出的代碼轉化為瀏覽器所能識別的代碼。webpack就可以完成這一任務。
3. 大多數(shù)情況下，我們不希望源代碼暴露給用戶，即使是保密性要求不那么高的前端代碼。我們知道，PC端瀏覽器通常都提供開發(fā)者工具，可以方便地查看和調(diào)試前端代碼，這在開發(fā)環(huán)境下意義重大。但對于生產(chǎn)環(huán)境，暴露源代碼不僅沒有太大意義，反而存在安全隱患（如果黑客比你更先發(fā)現(xiàn)代碼中的bug，你可能面臨嚴重損失）。因此，我們可以借助webpack重組和混淆源代碼，增加黑客閱讀源代碼的難度，以提升系統(tǒng)的安全性。
4. 借助webpack提供的dev-server，可以實現(xiàn)前后端分離。dev-server本質上就是一個node服務。當通過命令行啟用dev-server時，webpack會在本地啟動一個node服務，將打包后的文件作為靜態(tài)資源注入該服務，這樣就可以在不依賴后臺（這種說法并不完全準確，實際上webpack是通過node為你提供后臺服務）的情況下進行前端開發(fā)了。

配置對象中包含四個核心參數(shù)：

• 入口（entry）
• 出口（output）
• 加載器（loader）
• 插件（plugin）

入口：
webpack的打包入口，也就是webpack從哪個js開始打包。一個應用程序可以有一個或多個入口，由entry屬性指定，通常是一個對象。

module.exports = {entry: {main: "./src/main.js"}
}
// 可以簡寫為:entry: "./src/main.js"

應用程序可以有多個打包入口，多頁面應用配置：

entry: {app: './src/app.js',main: './src/main.js'
}
//允許這么寫：entry: ["./src/main1.js", "./src/main2.js"]//要求webpack分別以app.js和main.js為打包入口，獨立構建依賴關系圖。
//最終，項目代碼和第三方代碼將被獨立打包出來。
//構建多頁應用時，也是分別為每個頁面提供一個入口文件，獨立構建依賴圖。

出口（output）：
單頁面應用打包輸出

module.exports = {entry: {main: "./src/main.js"},output: {filename: 'bundle.js',  //文件名path: path.resolve(__dirname + '/dist')  //打包輸出的文件路徑}
}

多頁面應用打包產(chǎn)生的輸出，結果也會有很多個

{entry: {app: './src/app.js',main: './src/main.js'},output: {filename: '[name].js',  //使用占位符[]定義文件名path: path.resolve(__dirname + '/dist')//filename: '[name].[hash].js',  //使用熱更新（HMR）的配置,有助于熱更新檢測到輸出文件變化//使用splitChunk進行代碼分割時，被分割出來的代碼默認命名為chunk.[hash].js}
}
// 打包路徑將輸出app.js和main.js兩個文件

加載器（loader）
webpack的運行環(huán)境是nodejs，因此它只能識別JavaScript。但是我們的項目中可能存在大量的非JavaScript文件，如HTML、CSS、Typescript、txt，圖片文件等,他們可能就被js文件依賴，這時候就很難打包上他們。
解決這個問題，我們需要一些額外的代碼幫助webpack識別js文件中的嵌套依賴。一個加載器（loader）實際上就是一個將特定的字符串轉化成JavaScript代碼的函數(shù)。

//配置'css-loader'和'style-loader'
module.exports = {module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] //webpack將依次從后向前執(zhí)行每個loader//因為webpack采用的是流式處理，所以loader的書寫順序非常重要，最先需要執(zhí)行的loader必須放在數(shù)組的最后。// 執(zhí)行步驟：//1. 使用nodejs的fs模塊讀取index.css，將讀取到的字符串交給css-loader。//2.執(zhí)行css-loader。它是一個函數(shù)，將原始字符串進行一定的處理，輸出一個新的字符串。//3.將上一步輸出的字符串交給style-loader，進行第二步處理，最終仍然輸出一個字符串。//4.由webpack解析最終的處理結果。  },]}
};

插件（plugin）

//在webpack配置文件中使用插件：
const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin')
module.exports = {...plugins: [new ConsoleLogOnBuildWebpackPlugin()]
}

3. 熱更新原理
nodejs使用一個清單文件來記錄當前所有的資源文件，這個清單文件也正是熱更新模塊的監(jiān)測對象。
熱更新模塊監(jiān)測到文件名變化后，會通過websocket將這個新的文件發(fā)送到瀏覽器，瀏覽器重新執(zhí)行該文件，完成局部更新。由于只通過websocket發(fā)送了單個模塊，所以頁面既不會重載，也不會大面積刷新。