webpack基本配置

1）context：

context: path.resolve(__dirname, 'js'),//配合entry，含義是從當前專案目錄下的js檔案下查詢入口檔案

基本目錄，絕對路徑，用於從配置中解析入口起點和載入器。

2）entry：

entry: './js/main.js',

應用程式的起點入口，從這個起點開始，應用程式啟動執行，如果傳遞乙個陣列的話，那麼陣列的每一項都會執行。它的型別可以是string，array，object；

3）output：

output配置是輸出最終想要的**，它是乙個object，裡面包含很多配置項

* 1 filename：輸出檔案的名稱

* 2 path：檔案被寫入硬碟的位置，一般通過nodejs的path模組獲取絕對路徑

path: path.resolve(_dirname,'./dist') //將輸出的檔案都放在dist目錄下

如果有多個chunk要輸出時，就需要借助[name]變數，webpack會為每個chunk取乙個名稱，因此我們根據chunk的名稱來區分輸出的檔名。

filename: '[name].js' //[name]的值是entry的鍵值，會輸出多個入口檔案

chunkfilename是未被列在entry中的，但是有需要被打包出來的檔案命名配置。在非同步按需載入模組的時候，一般這樣的檔案沒有被列在entry中，【如在專案在js檔案內再新建plugins資料夾，再建立a.js檔案】在入口檔案中使用非同步方式（require.ensure）引入a.js，然後在webpack的output配置新增chunkfilename配置

require.ensure（

dependencies：string，

callback：function（require），

errorcallback：function（error），

chunkname：string

）

【webpack中的require.ensure()可以實現按需載入資源包括js,css等，它會給裡面require的檔案單獨打包，不和主檔案打包在一起，webpack會自動配置名字。這裡有三個引數，第乙個引數是個陣列，標明依賴的模組，這些會提前載入，第二個是**函式，在這個**函式裡面的require的檔案會被單獨打包成乙個chunk,不會和主檔案打包在一起，這樣就生成了兩個chunk,第一次載入時只載入主檔案，當點選時就會載入單獨打包的chunk。

還要配置chunkfilename:[name].js這樣才會最終生成正確的路徑和名字。】

* 3 publicpath

output.path是指所有輸出檔案的本地檔案目錄（絕對路徑），也即path是存放打包後的檔案的輸出目錄。

publicpath正式環境可以理解為改變相對目錄下的靜態資源檔案的路徑為正確的路徑，它是指定資源檔案引用的目錄（相對於伺服器的根目錄來講）

開發環境下的publicpath的理解：將輸出的檔案都放在dist目錄下，然後把dist目錄刪除掉，使用publicpath可以保留dist目錄

* 4 crossoriginloading

webpack輸出的部分**有可能需要非同步載入，而非同步載入是通過json方式實現的。jsonp的原理是動態的向html中插入乙個,crossoriginloading則是用於配置這個一部插入的標籤的crossorigin的值。【anonymous-啟用跨域載入，在載入此指令碼資源時不會帶上使用者的cookies，即傳送不帶憑據的請求；use-credentials-啟用跨域載入，在載入此指令碼資源時會帶上使用者的cookies，傳送帶憑據的請求；false-禁用跨域載入】

4）模式（mode）

提供mode配置項，告訴webpack使用對應的模式【使用development模式**不會被壓縮，使用production**會被壓縮】

我們都知道webpack是適用於資源進行打包的，裡面的所有資源都是模組，內部實現了對模組資源進行載入機制，但是webpack只能處理js模組，如果要處理其他型別的檔案，就要使用loader進行轉換。loader可以理解為是模組和資源的轉換器，它本身也是乙個函式，接收原始檔作為引數，返回轉換的結果。

配置loader，需要使用rules模組來讀取和解析規則，它是乙個陣列，陣列裡面的每一項描述了如何處理部分檔案

* 1 條件匹配：

test：/\.js$/ , //正則匹配以js結尾的

include：path.resolve(__dirname,'src') //只包含目錄下的js檔案，加快查詢速度

exclude：path.resolve(__dirname,'node_modules') //排除node_modules目錄下的檔案

通過配置test，include，exclude三個配置項來選中loader需要應用規則的檔案；

* 2 應用規則：

對選中的檔案通過use配置項來應用loader，可以只應用乙個loader或者按照從右往左的順序應用一組loader，也可以向loader傳入引數；

* 3 重置順序：

loader執行順序預設是從右往左執行的，但是我們可以通過enforce選項將其中乙個loader的執行順序放到最前或最後

在loader需要傳入多個引數時，可以通過乙個object來描述

use: [,/*

enforce: 'post' 的含義是將loader執行的順序放到最後

enforce: 'pre' 的含義是將loader執行順序放到最前面

*/enforce: 'post'}]

5）noparse

該配置項可以讓webpack忽略對部分未採用模組化檔案的遞迴解析和處理，該忽略的檔案不能包含import，require，define等模組化語句。這樣可以提高構建效能，比如像一些庫jquery等就沒必要使用webpack去遞迴解析和處理。

6）alias

resolve.alias是通過別名來將原匯入路徑對映成乙個新的匯入路徑。

resolve: 
}

7）extensions

在使用import匯入檔案時，有時候沒有帶入檔案的字尾名，webpack會自動帶上字尾去訪問檔案是否存在，預設的字尾名為[.js .json]

8）externals

externals用來告訴webpack在構建**時使用了不處理應用的某些依賴庫，即告訴webpack在js執行環境中已經內建了哪些全域性變數，不用將這些**打包到**裡面去。依然可以在**中通過amd，cmd或window全域性方式訪問。

webpack基本配置

webpack基本配置

webpack基本配置

基本的webpack配置

相關推薦