webpack學習筆記 整體配置結構

2022-01-22 17:46:10 字數 1816 閱讀 5642

之前的章節分別講述了每個配置項的具體含義,但沒有描述它們所處的位置和資料結構,下面通過乙份**來描述清楚:

module.exports =,

//如何輸出結果:在 webpack 經過一系列處理後,如何輸出最終想要的**。

output: ,

//配置模組相關

module: }]

},],

noparse: [

//不用解析和處理的模組

/special-library\.js$/ //

用正則匹配

], },

//配置外掛程式

plugins: [

],//

配置尋找模組的規則

resolve: ,

alias: [

//alias 還支援使用陣列來更詳細的配置

],symlinks:

true, //

是否跟隨檔案軟鏈結去搜尋模組的路徑

descriptionfiles: ['package.json'], //

模組的描述檔案

mainfields: ['main'], //

模組的描述檔案裡的描述入口的檔案的欄位名稱

enforceextension: false, //

是否強制匯入語句必須要寫明檔案字尾

},

//輸出檔案效能檢查配置

performance:

},devtool: 'source-map', //

配置 source-map 型別

context: __dirname,

//webpack 使用的根目錄,string 型別必須是絕對路徑

//配置輸出**的執行環境

target: 'web', //

瀏覽器,預設

target: 'webworker', //

webworker

target: 'node', //

node.js,使用 `require` 語句載入 chunk **

target: 'async-node', //

node.js,非同步載入 chunk **

target: 'node-webkit', //

nw.js

target: 'electron-main', //

electron, 主線程

target: 'electron-renderer', //

electron, 渲染執行緒

externals: ,

stats: ,

devserver: ,

contentbase: path.join(__dirname, 'public'), //

配置 devserver http 伺服器的檔案根目錄

compress: true, //

是否開啟 gzip 壓縮

historyapifallback: true, //

是否開發 html5 history api 網頁

hot: true, //

是否開啟模組熱替換功能

是否開啟 https 模式

}, profile:

true, //

是否捕捉 webpack 構建的效能資訊,用於分析什麼原因導致構建效能不佳

cache:

false, //

是否啟用快取提公升構建速度

watch:

true, //

是否開始

watchoptions: ,

}

webpack學習筆記 配置plugins

plugin plugin 的配置很簡單,plugins 配置項接受乙個陣列,陣列裡每一項都是乙個要使用的 plugin 的例項,plugin 需要的引數通過建構函式傳入。const commonschunkplugin require webpack lib optimize commonschu...

webpack學習筆記 配置resolve

resolve resolve.alias 配置項通過別名來把原匯入路徑對映成乙個新的匯入路徑。例如使用以下配置 webpack alias 配置 resolve 當你通過 import button from components button 匯入時,實際上被alias等價替換成了 import...

webpack學習筆記 配置resolve

resolve resolve.alias 配置項通過別名來把原匯入路徑對映成乙個新的匯入路徑。例如使用以下配置 webpack alias 配置 resolve 當你通過 import button from components button 匯入時,實際上被alias等價替換成了 import...