搭建開發(fā)環(huán)境

問題：之前改代碼，需重新打包才能運(yùn)行查看，效率很低

開發(fā)環(huán)境： 配置 webpack-dev-server 快速開發(fā)應(yīng)用程序

作用：啟動(dòng) Web 服務(wù)， 自動(dòng) 檢測代碼變化， 熱更新 到網(wǎng)頁

注意：dist 目錄和打包內(nèi)容是在內(nèi)存里（更新快）

步驟：

1. 下載 webpack-dev-server 軟件包到當(dāng)前項(xiàng)目

2. 設(shè)置模式 為 開發(fā)模式 ，并配置 自定義命令

3. 使用 npm run dev 來啟動(dòng)開發(fā)服務(wù)器，試試熱更新效果

打包模式

打包模式：告知 Webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化

分類：

設(shè)置： 方式1：在 webpack.config.js 配置文件設(shè)置 mode 選項(xiàng) 

方式2：在 package.json 命令行設(shè)置 mode 參數(shù)

注意：命令行設(shè)置的優(yōu)先級(jí)高于配置文件中的，推薦用命令行設(shè)置

打包模式的應(yīng)用  

需求：在開發(fā)模式下用 style-loader 內(nèi)嵌更快，在生產(chǎn)模式下提取 css 代碼

方案1： webpack.config.js 配置導(dǎo)出函數(shù)，但是局限性大（只接受 2 種模式）

方案2：借助 cross-env （跨平臺(tái)通用）包命令，設(shè)置參數(shù)區(qū)分環(huán)境

步驟：

1. 下載 cross-env 軟件包到當(dāng)前項(xiàng)目

2. 配置 自定義命令，傳入?yún)?shù)名和值（會(huì)綁定到 process.env 對(duì)象下）

3. 在 webpack.config.js 區(qū)分不同環(huán)境 使用 不同配置

4. 重新打包觀察兩種配置區(qū)別

方案3： 配置不同的 webpack.config.js （適用多種模式差異性較大情況）

前端-注入環(huán)境變量

需求： 前端 項(xiàng)目中，開發(fā)模式下打印語句生效，生產(chǎn)模式下打印語句失效

問題：cross-env 設(shè)置的只在 Node.js 環(huán)境生效，前端代碼無法訪process.env.NODE_ENV

解決 ：使用 Webpack 內(nèi)置的 DefinePlugin 插件

作用：在編譯時(shí)，將前端代碼中匹配的變量名，替換為值或表達(dá)式

DefinePlugin 

DefinePlugin  允許在 編譯時(shí) 將你代碼中的變量替換為其他值或表達(dá)式。這在需要根據(jù)開發(fā)模式與生產(chǎn)模式進(jìn)行不同的操作時(shí)，非常有用。例如，如果想在開發(fā)構(gòu)建中進(jìn)行日志記錄，而不在生產(chǎn)構(gòu)建中進(jìn)行，就可以定義一個(gè)全局常量去判斷是否記錄日志。這就是  DefinePlugin  的發(fā)光之處，設(shè)置好它，就可以忘掉開發(fā)環(huán)境和生產(chǎn)環(huán)境的構(gòu)建規(guī)則。

new webpack.DefinePlugin({  // 定義...});

Usage 

傳遞給  DefinePlugin  的每個(gè)鍵都是一個(gè)標(biāo)識(shí)符或多個(gè)以  .  連接的標(biāo)識(shí)符。

• 如果該值為字符串，它將被作為代碼片段來使用。
• 如果該值不是字符串，則將被轉(zhuǎn)換成字符串（包括函數(shù)方法）。
• 如果值是一個(gè)對(duì)象，則它所有的鍵將使用相同方法定義。
• 如果鍵添加 typeof 作為前綴，它會(huì)被定義為 typeof 調(diào)用。

這些值將內(nèi)聯(lián)到代碼中，從而允許通過代碼壓縮來刪除冗余的條件判斷

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

開發(fā)環(huán)境調(diào)錯(cuò) - source map

問題：代碼被壓縮和混淆，無法正確定位源代碼位置（行數(shù)和列數(shù)）

source map： 可以準(zhǔn)確追蹤 error 和 warning 在原始代碼的位置

設(shè)置：webpack.config.js 配置 devtool 選項(xiàng) inline-source-map 選項(xiàng)：把源碼的位置信息一起打包在 js 文件內(nèi)

注意：source map 僅適用于開發(fā)環(huán)境，不要在生產(chǎn)環(huán)境使用（防止被 輕易 查看源碼位置）

解析別名 alias

解析別名： 配置模塊如何解析，創(chuàng)建 import 引入路徑的別名，來確保模塊引入變得更簡單

例如：原來路徑如圖，比較長而且相對(duì)路徑不安全

解決：在 webpack.config.js 中配置解析別名 @ 來代表 src 絕對(duì)路徑

優(yōu)化-CDN使用 

CDN定義 ：內(nèi)容分發(fā)網(wǎng)絡(luò)，指的是一組分布在各個(gè)地區(qū)的服務(wù)器

作用：把靜態(tài)資源文件/第三方庫放在 CDN 網(wǎng)絡(luò)中各個(gè)服務(wù)器中，供用戶就近請求獲取

好處：減輕自己服務(wù)器請求壓力，就近請求物理延遲低，配套緩存策略

步驟：

1. 在 html 中引入第三方庫的 CDN 地址 并用模板語法判斷

2. 配置 webpack.config.js 中 externals 外部擴(kuò)展選項(xiàng)（防止某些 import 的包被打包）

3. 兩種模式下打包觀察效果

多頁面打包 

單頁面 ： 單個(gè) html 文件，切換 DOM 的方式實(shí)現(xiàn)不同業(yè)務(wù)邏輯展示，后續(xù) Vue/React 會(huì)學(xué)到

多頁面： 多個(gè) html 文件，切換頁面實(shí)現(xiàn)不同業(yè)務(wù)邏輯展示

需求：把黑馬頭條-數(shù)據(jù)管理平臺(tái)-內(nèi)容頁面一起引入打包使用

步驟：

1. 準(zhǔn)備 源碼 （html，css，js）放入相應(yīng)位置，并改用模塊化語法 導(dǎo)出

2. 下載 form-serialize 包并 導(dǎo)入 到核心代碼中使用

3. 配置 webpack.config.js 多入口 和 多頁面 的設(shè)置

4. 重新打包觀察效果

優(yōu)化-分割公共代碼 

需求：把 2 個(gè)以上頁面引用的公共代碼提取

步驟：

1. 配置 webpack.config.js 的 splitChunks 分割功能

2. 打包 觀察效果

總結(jié)

到此這篇關(guān)于用Webpack搭建開發(fā)環(huán)境并打包代碼的文章就介紹到這了,更多相關(guān)Webpack搭建開發(fā)環(huán)境并打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論