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

http://yzkb.51969.com/

1. webpack基本概念

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

2. 使用webpack原因

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

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

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

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

module.exports = {

entry: {

main: "./src/main.js"

}

}

// 可以簡(jiǎn)寫(xiě)為:

entry: "./src/main.js"

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

entry: {

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

main: './src/main.js'

}

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

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

//最終，項(xiàng)目代碼和第三方代碼將被獨(dú)立打包出來(lái)。

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

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

module.exports = {

entry: {

main: "./src/main.js"

},

output: {

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

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

}

}

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

{

entry: {

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

main: './src/main.js'

},

output: {

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

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

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

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

}

}

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

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

//配置'css-loader'和'style-loader'

module.exports = {

module: {

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader'] //webpack將依次從后向前執(zhí)行每個(gè)loader

//因?yàn)閣ebpack采用的是流式處理，所以loader的書(shū)寫(xiě)順序非常重要，最先需要執(zhí)行的loader必須放在數(shù)組的最后。

// 執(zhí)行步驟：

//1. 使用nodejs的fs模塊讀取index.css，將讀取到的字符串交給css-loader。

//2.執(zhí)行css-loader。它是一個(gè)函數(shù)，將原始字符串進(jìn)行一定的處理，輸出一個(gè)新的字符串。

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

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

]

}

};

插件（plugin）

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

const ConsoleLogOnBuildWebpackPlugin = require('ConsoleLogOnBuildWebpackPlugin')

module.exports = {

...

plugins: [

new ConsoleLogOnBuildWebpackPlugin()

]

}

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

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

http://yzkb.51969.com/

精彩文章