快捷導(dǎo)航

一會(huì)帶你學(xué)會(huì)用Webpack搭建開發(fā)環(huán)境并打包代碼

更新時(shí)間：2023年08月29日 09:01:02 作者：小周不擺爛

這篇文章主要給大家介紹了關(guān)于如何用Webpack搭建開發(fā)環(huán)境并打包的相關(guān)資料,webpack是一個(gè)現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器(module bundler),需要的朋友可以參考下

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

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

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

作用：?jiǎn)?dòng) Web 服務(wù)，自動(dòng) 檢測(cè)代碼變化，熱更新到網(wǎng)頁(yè)

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

步驟：

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

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

3. 使用 npm run dev 來(lái)啟動(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ā)模式下打印語(yǔ)句生效，生產(chǎn)模式下打印語(yǔ)句失效

問(wèn)題：cross-env 設(shè)置的只在 Node.js 環(huán)境生效，前端代碼無(wú)法訪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í)符。

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

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

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),
});