當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack入门进阶调优第一章

發(fā)布時間：2023/12/13 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack入门进阶调优第一章小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.1何為Webpack

webpack是開源的JS模塊打包工具

核心功能是解決模塊之間的依賴，吧哥哥模塊按照特定的規(guī)則和順序組織在一起，最終合并為一個JS文件。這個過程叫模塊打包

1.2為何需要Webpack

1.2.1何為模塊

在設(shè)計程序結(jié)構(gòu)時，更好的組織方式是按照特定的功能將其拆分為多個代碼段，每個代碼段實現(xiàn)一個特定的目的。可進行獨立的設(shè)計開發(fā)測試，最終通過接口來組合在一起，這就是基本的模塊化思想。

1.2.2 JavaScript中的模塊

JavaScript中沒有模塊，Brendan Rich最初設(shè)計語言只定位成小型腳本語言。再過去很長時間只能通過script標(biāo)簽將他們一個個插入頁面，缺點很多：

需要手動維護加載順序，依賴關(guān)系隱式
每個script意味一次請求，拖慢網(wǎng)頁渲染速度
每個script標(biāo)簽頂層作用域即全局作用域，容易造成全局作用域的污染。

模塊化解決了上述問題：

通過導(dǎo)入導(dǎo)出語句清晰看到模塊間的依賴關(guān)系
模塊可以借助工具進行打包，在頁面中只需要加載合并后的資源文件，減少網(wǎng)絡(luò)開銷
多個模塊之間作用域隔離，彼此不會用命名沖突

2015年， ES6正式定義了JavaScript模塊標(biāo)準(zhǔn)！已得大多數(shù)現(xiàn)代瀏覽器支持，但實際應(yīng)用方面還需要等待一段時間，主要原因：

無法使用 code splitting 和 tree shaking
大多數(shù)npm模塊還是CommonJS形式，瀏覽器不支持其語法，沒法世界拿來用
仍然需要考慮個別瀏覽器及平臺的兼容性問題

那么，如何讓我們的工程在使用模塊化的同時也能正常運行在瀏覽器中，就到了模塊打包工具的出場了。

1.2.3模塊打包工具

任務(wù)是解決模塊間的依賴，使其打包后的結(jié)果能運行在瀏覽器上。工作方式主要分兩種：

將存在依賴關(guān)系的模塊按照特定規(guī)則合并為單個JS文件，一次全部加載進頁面
在頁面初始時加載一個入口模塊，其他模塊一步的進行加載

目前社區(qū)中比較流行的模塊打包工具Webpack、Parcel、Rollup等

1.2.4 為何選擇Webpack

1) Webpack默認(rèn)支持多種模塊標(biāo)準(zhǔn)，包括AMD、CommonJS,以及最終的ES6模塊

2）Webpack有完備的代碼分割（code splitting）解決方案

3）Webpack可以處理各種類型的資源

4）Webpack擁有龐大的社區(qū)支持。

1.3安裝

安裝Node.js環(huán)境

node -v npm -v

npm安裝Webpack方式：一種全局安裝，一種本地安裝

全局安裝Webpack好處是npm幫我們綁定一個命令行環(huán)境變量，一次安裝處處運行

本地安裝則會添加其成為項目中的依賴，只能在項目內(nèi)部使用。

建議本地安裝方式，主要原因：

全局安裝與他人進行項目協(xié)作時，由于每個人系統(tǒng)中Webpack版本不同，可能會導(dǎo)致輸出結(jié)果不一致
部分依賴于Webpack的插件會調(diào)用項目中的Webpack的內(nèi)部模塊，這種情況下仍然需要在項目本地安裝Webpack，而如果全局本地都用則容易混淆

新建一個工程目錄

npm init

生成一個package.json文件

安裝Webpack命令

npm i webpack webpack-cli --save-dev

webpack是核心模塊，webpack-cli則是命令行工具，在本例中兩者是必需的

安裝結(jié)束后，在命令行執(zhí)行npx webpack -v 以及 npx webpack-cli -v 可顯示各自的版本號，即證明安裝成功

1.4打包第一個應(yīng)用

工程目錄添加以下幾個文件

index.js

import addContent from "./add-content.js"; document.write("my first Webpack app.<br />"); addContent();

add-content.js

export default function () {document.write("Hello world!"); }

index.html

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>My first Webpack app.</title></head><body><script src="./dist/bundle.js"></script></body> </html>

在控制臺輸入打包命令

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

打包效果

用瀏覽器打開index.html,如圖

?回顧指令

entry是資源打包入口。webpack從這里開始進行模塊查找

output-filename是輸出資源名，打包完成出現(xiàn)dist目錄包含bundle.js是Webpack打包結(jié)果

mode是打包模式（development、production、none),當(dāng)置于development和production模式下自動添加適合當(dāng)前模式的一系列配置，減少人為工作量。開發(fā)環(huán)境一般設(shè)置為development模式

1.4.2使用npm script

為了使命令行指令簡潔，我們可以在package.json中添加一個腳本命令

"scripts": {"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"},

重新打包輸入npm命令即可

npm run build

1.4.3使用默認(rèn)目錄配置

通常我們分別設(shè)置源碼目錄與資源輸出目錄

工程中創(chuàng)src目錄，并將index.js和add-content.js移動到該目錄下，資源輸出目錄，Webpack已經(jīng)默認(rèn)是/dist,源代碼入口Webpack默認(rèn)就是src/index.js。可以省略掉entry配置

編輯package.json:

"scripts": {"build": "webpack --output-filename=bundle.js --mode=development"},

1.4.4使用配置文件

?Webpack有非常多的配置項以及對應(yīng)的命令行參數(shù)

npx webpack -h

當(dāng)項目需要越來越多的配置項時，命令維護困難。所以創(chuàng)建一個配置文件，在Webpack每次打包是讀取該配置即可

工程下創(chuàng)建 webpack.config.js

module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",},mode: "development", };

值得注意的是Webpack對于output.path的要求是使用絕對路徑（從系統(tǒng)根目錄開始的完整路徑），之前我們在命令行中為了簡潔所以使用了相對路徑，而在webpack.config.js中，我們通過調(diào)用node.js的路徑拼裝函數(shù)——path.join,將__dirname與dist連接起來，得到了最終的資源輸出路徑。

去掉package.json中配置的打包參數(shù)了

"scripts": {"build": "webpack"},

1.4.5webpack-dev-server

提高調(diào)試效率的本地開發(fā)工具文件修改，自動刷新

npm install webpack-dev-server --save-dev

ps:--save-dev將工具作為devDependencies開發(fā)環(huán)境依賴,工程上線時要進行依賴安裝可以通過

npm install --production過濾掉devDependencies中的模塊

為了便捷啟動webpack-dev-server,添加dev指令

"scripts": {"dev": "webpack-dev-server","build": "webpack"},

更改webpack.config.js

module.exports = {entry: "./src/index.js",output: {filename: "./bundle.js",},mode: "development",devServer: {publicPath: '/dist',} };

添加devServer對象專門放webpack-dev-server配置。webpack-dev-server可以看做服務(wù)者，接收瀏覽器請求，將資源返回。當(dāng)服務(wù)啟動時，會先讓W(xué)ebpack進行模塊打包并將資源準(zhǔn)備好。當(dāng)接收到瀏覽器的資源請求時，會首先進行URL地址校驗。如果改地址是資源服務(wù)地址（上面配置的publicPath）,就從打包結(jié)果中尋找該資源返回瀏覽器。反之，地址不屬于資源服務(wù)地址，則直接讀取硬盤中的源文件并將其返回。

webpack-dev-server兩大職能：

1.令Webpack進行模塊打包，并處理靜態(tài)資源文件請求

2.作為普通的Web Server,處理靜態(tài)資源文件請求

總結(jié)

以上是生活随笔為你收集整理的webpack入门进阶调优第一章的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。