webpack-dev-middleware使用手冊
在使用webpack進行檔案打包的時候,為了開發的便利我們會選擇使用webpack-dev-middleware模組。webpack-dev-middleware模組是一個簡化開發流程的模組。它有如下特點:
- 它將打包後的檔案直接寫入記憶體,而非硬碟。
- 每次請求都將獲得最新的打包結果
模組的使用
var compiler = require('webpack')({
output: {
path: 'd:\\project\\dist'
}
})
var config = {
publicPath: '/static/',
index: '../index.html'
}
var middleware = require('webpack-dev-middle')(compiler, config)
var app = require('express')()
app.use(middleware)
它依賴兩個引數: compiler
, config
。 compiler
是webpack生成的例項,webpack-dev-middleware模組每次通過該例項進行檔案打包。config
是webpack-dev-middleware模組本身的配置物件。它生成的middleware
是一個供express使用的中介軟體。通過該中介軟體請求打包後的檔案,能夠取到記憶體中的打包結果。
更多細節
- 通過請求的URL分析出檔案的具體路徑。對於一個請求
${publicPath}js/target.js
,它會讀取檔案${output.path}\\js\\target.js
。如果檔案不存在,它將不會對此請求進行處理。(output.path
為webpack打包後的輸出目錄,publicPath
為webpack-dev-middle模組的配置)。比如webpack將檔案打包到d:\\project\\dist\\
,publicPath
配置為/static/
。請求的URL為/static/js/target.js
時,webpack-dev-middleware模組會讀取檔案d:\\project\\dist\\js\\target.js
。 - 如果URL請求的不是具體檔案而是目錄,它會讀取檔案
${output.path}${index}
(index
為webpack-dev-middle模組的配置)。比如比如webpack將檔案打包到d:\\project\\dist\\
,publicPath
配置為/static/
,index
配置為../index.html
。請求的URL為/static/
時,它會讀取檔案d:\\project\\index.html
- 模組會監聽檔案,當原始檔內容發生變動時,會重新打包檔案。在lazy模式下,只會在每次請求時重新打包檔案,而不監聽檔案變化。
- 更多模組配置引數介紹
相關文章
- TcpDump使用手冊TCP
- MyBatis 使用手冊MyBatis
- Zabbix 使用手冊
- Anaconda使用手冊
- Mybatis應用手冊MyBatis
- sqlmap使用手冊SQL
- 儀器使用手冊
- git 基本使用手冊Git
- Cobra框架使用手冊框架
- Room Database完全使用手冊OOMDatabase
- MongoDB和pymongo自用手冊MongoDB
- 【C#】CsvHelper 使用手冊C#
- PerfDog WEB端使用手冊Web
- vim-plug使用手冊
- 【C#】AutoMapper 使用手冊C#APP
- Gerrit和Jenkins使用手冊Jenkins
- Carbon中文使用手冊(下)
- Linux parallel 命令使用手冊LinuxParallel
- ThreadLocal 使用手冊 | 按需收藏thread
- Git 快速使用手冊(二)Git
- Cobalt strike3.0使用手冊
- 《Redis 使用手冊》- 字串(PHP 版本)Redis字串PHP
- BeautifulSoup使用手冊(查詢篇)
- ES6 完全使用手冊
- MySQL DBA 常用手冊小結MySql
- Rational ClearQuest 安裝、配置、使用手冊
- 報警系統QuickAlarm使用手冊UI
- mysql常用命令使用手冊MySql
- Canvas實用庫Fabric.js使用手冊CanvasJS
- TypeScript魔法堂:列舉的超實用手冊TypeScript
- validation客戶端驗證框架使用手冊客戶端框架
- 【Emmet 的使用手冊(知識點超全版本)】
- Microsoft PowerPoint 2019 for Mac 簡體中文安裝使用手冊ROSMac
- Kubernetes部署通用手冊 (支援版本1.19,1.18,1.17,1.16)
- WGLCOUD 使用手冊 - 監控攝像頭的狀態
- spring動態註冊bean會使AOP失效?SpringBean
- spring應用手冊-AOP(註解)-(20)-切面釋出-前置通知Spring
- spring應用手冊-IOC(XML配置實現)-(26)-注入set集合SpringXML
- 全志R16 DragonBoard使用手冊資料下載Go