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

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

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

作用：啟動 Web 服務， 自動 檢測代碼變化， 熱更新 到網頁

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

步驟：

1. 下載 webpack-dev-server 軟件包到當前項目

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

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

打包模式

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

分類：

設置： 方式1：在 webpack.config.js 配置文件設置 mode 選項 

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

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

打包模式的應用  

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

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

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

步驟：

1. 下載 cross-env 軟件包到當前項目

2. 配置 自定義命令，傳入參數(shù)名和值（會綁定到 process.env 對象下）

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

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

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

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

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

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

解決 ：使用 Webpack 內置的 DefinePlugin 插件

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

DefinePlugin 

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

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

Usage 

傳遞給  DefinePlugin  的每個鍵都是一個標識符或多個以  .  連接的標識符。

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

這些值將內聯(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)境調錯 - source map

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

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

設置：webpack.config.js 配置 devtool 選項 inline-source-map 選項：把源碼的位置信息一起打包在 js 文件內

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

解析別名 alias

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

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

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

優(yōu)化-CDN使用 

CDN定義 ：內容分發(fā)網絡，指的是一組分布在各個地區(qū)的服務器

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

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

步驟：

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

2. 配置 webpack.config.js 中 externals 外部擴展選項（防止某些 import 的包被打包）

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

多頁面打包 

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

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

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

步驟：

1. 準備 源碼 （html，css，js）放入相應位置，并改用模塊化語法 導出

2. 下載 form-serialize 包并 導入 到核心代碼中使用

3. 配置 webpack.config.js 多入口 和 多頁面 的設置

4. 重新打包觀察效果

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

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

步驟：

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

2. 打包 觀察效果

總結

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