走進webpack(1) 環境拆分及模組化

2022-07-12 09:06:08 字數 1712 閱讀 4770

初級的文章和demo已經基本完成了,**也已經上傳到了我的github上,如果你對webpack的使用並不是十分了解,那麼建議你回頭看下走近系列,裡面包括了當前專案中使用頻繁的外掛程式,loader的講解。以及基本的webpack配置,相關依賴等。如果你已經有了一定的webpack使用經驗。那麼你直接看這篇文章也是完全沒問題的。

這一系列會著重講解webpack的高階使用方法,前面文章講解過的一些部分,就不會再去重複的解釋。

那麼,還是先交代一下環境以及目錄結構,這些你可以直接從github上獲取到:

下面是當前的環境配置版本:

在實際的工作當中,我們會區分不同的環境來執行不同的webpack配置**,以實現不同環境的要求,當前的主要環境其實就兩個,乙個開發環境,乙個生產環境。開發環境更傾向於便捷的除錯,開發的方便,比如熱載入等。而生產環境希望**的體積更小,http請求更少,頁面的載入速度更快。甚至有些時候兩個環境的要求是互斥的。所以才需要根據不同的環境來配置不同的**。

廢話不多說,咱們直接進入正題吧。

在前面的文章中,為了使靜態資源找到正確的路徑,我們設定了乙個變數webpath,那麼如果要區分環境,變數的值肯定是不同的,那麼我們如何根據命令來使webpath獲得不同的值呢,其實很簡單:

修改一下package.json中的build命令和dev命令,加上乙個引數,然後我們在webpack.config.js中可以通過process.env來獲取到這個引數。這樣就可以區分不同的環境了。

"scripts":
那麼修改完package.json中的命令後,我們還需要修改一下webpack.config.js中webpath那段**:

/*

根據引數的不同來區分不同的環境

*/if(process.env.type == "build")

}else

}

這樣就可以了,執行不同的命令來試試效果如何吧。這裡簡單說明一下,process.env是什麼,process是node的乙個全域性環境變數,process.env.type也就是你設定在scripts命令中的type值。更詳細的內容不在這裡多說,有強迫症的小夥伴可以去看看這裡:

那麼環境拆分說完了,如何模組化配置webpack呢?其實也很簡單,聽起來比較高逼格罷了。簡單說就是把通用變數放在乙個單獨的js檔案中,然後通過export暴露介面,require引入介面而已!比如你在使用vue中一定寫過很多這種東西,再簡單也要說一下滴。

我們新建乙個與webpack.config.js同級的資料夾,名字就叫做entry.js(入口)。然後我們在entry.js中寫入入口配置的**:

const entry ={};  

//宣告路徑屬性

entry.path=

//匯出該變數

module.exports = entry;

然後在webpack.config.js中引入該模組,並且修改下入口處的配置**:

/*

在這裡引入entry檔案的路徑

*/const entry = require("./entry.js");

/*入口檔案

*/entry:entry.path

1 環境準備

安裝之前,你需要在你用於開發區塊鏈應用或者操作超級賬本的開發機檢查是否已經安裝好需要的環境。如果本地沒有curl或者執行curl報錯,你需要安裝最新版本的curl 超級賬本許多元件都需要go語言支援 go version 1.10.x is required.環境變數 export gopath h...

1 環境搭建

對於這個東西嗎,我也不是很了解,邊學邊記錄下來 需要的軟體都存入雲盤了 環境搭建 2 配置好路徑後,cmd命令除錯,敲入gradle然後回車,配置成功後如圖 選好自己想要的,已經開發引擎,點選generate,開始生成專案,生成過程中 generate按鈕變灰色,等待到變回白色高亮時候,專案就建立成...

nodejs入門1 環境

安裝完成後,可以從開始選單中nodejs看到,如下 點開node.js command prompt選項即可。可能第一次使用命令列的使用者會擔心環境變數問題,莫擔心,因為msi會把環境變數幫你配置好 ok,來開始前端程式設計的第乙個例子吧 hello world 用txt文字編寫乙個hellowor...