柚子快報激活碼778899分享：webpack學(xué)習(xí)筆記

http://yzkb.51969.com/

1. webpack基本概念

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

2. 使用webpack原因

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

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

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

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

module.exports = {

entry: {

main: "./src/main.js"

}

}

// 可以簡寫為:

entry: "./src/main.js"

應(yīng)用程序可以有多個打包入口，多頁面應(yīng)用配置：

entry: {

app: './src/app.js',

main: './src/main.js'

}

//允許這么寫：entry: ["./src/main1.js", "./src/main2.js"]

//要求webpack分別以app.js和main.js為打包入口，獨立構(gòu)建依賴關(guān)系圖。

//最終，項目代碼和第三方代碼將被獨立打包出來。

//構(gòu)建多頁應(yīng)用時，也是分別為每個頁面提供一個入口文件，獨立構(gòu)建依賴圖。

出口（output）： 單頁面應(yīng)用打包輸出

module.exports = {

entry: {

main: "./src/main.js"

},

output: {

filename: 'bundle.js', //文件名

path: path.resolve(__dirname + '/dist') //打包輸出的文件路徑

}

}

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

{

entry: {

app: './src/app.js',

main: './src/main.js'

},

output: {

filename: '[name].js', //使用占位符[]定義文件名

path: path.resolve(__dirname + '/dist')

//filename: '[name].[hash].js', //使用熱更新（HMR）的配置,有助于熱更新檢測到輸出文件變化

//使用splitChunk進(jìn)行代碼分割時，被分割出來的代碼默認(rèn)命名為chunk.[hash].js

}

}

// 打包路徑將輸出app.js和main.js兩個文件

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

//3.將上一步輸出的字符串交給style-loader，進(jìn)行第二步處理，最終仍然輸出一個字符串。

//4.由webpack解析最終的處理結(jié)果。 },

]

}

};

插件（plugin）

//在webpack配置文件中使用插件：

const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin')

module.exports = {

...

plugins: [

new ConsoleLogOnBuildWebpackPlugin()

]

}

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

柚子快報激活碼778899分享：webpack學(xué)習(xí)筆記

http://yzkb.51969.com/

精彩文章