【免費(fèi)下載鏈接】webpack-serveRepository has moved:項(xiàng)目地址https://gitcode.com/gh_mirrors/we/webpack-serve點(diǎn)擊查看免費(fèi)下載webpack-serve是一款輕量、現(xiàn)代、靈活的webpack 開發(fā)服務(wù)器development server。相比 webpack-dev-server它的核心思路是保持精簡內(nèi)置熱更新HMR、靜態(tài)資源服務(wù)、HTTPS 等基礎(chǔ)能力其余功能代理、History 回退、壓縮等通過add選項(xiàng)用幾行熟悉的 Koa 中間件模式即可擴(kuò)展。本文將帶你5 分鐘完成安裝、啟動與常用配置快速跑起你的開發(fā)環(huán)境。??版本提示該項(xiàng)目已標(biāo)記為 DEPRECATED見 README.md官方建議使用仍在積極維護(hù)的 webpack-dev-server。本文仍完整介紹其用法適合學(xué)習(xí)其設(shè)計(jì)理念、維護(hù)已有項(xiàng)目或了解其擴(kuò)展機(jī)制。一、為什么值得了解 webpack-serve特性webpack-serve說明熱模塊替換 HMR? 內(nèi)置基于 webpack-hot-client保存代碼自動生效靜態(tài)資源服務(wù)? 內(nèi)置通過content選項(xiàng)指定目錄HTTPS / HTTP2? 內(nèi)置命令行即可開啟零配置啟動? 支持依賴 webpack v4 的零配置默認(rèn)值功能擴(kuò)展add選項(xiàng)用 Koa 中間件模式自由組裝不捆綁冗余功能它的被低估之處在于很多開發(fā)者只把開發(fā)服務(wù)器當(dāng)作啟動命令而 webpack-serve 的add 擴(kuò)展機(jī)制 事件總線設(shè)計(jì)讓代理、路由、History 回退等能力都以極簡方式接入代碼可讀性和可維護(hù)性都很高核心實(shí)現(xiàn)見 lib/app.js 與 lib/middleware/WebpackMiddleware.js。二、一鍵安裝環(huán)境與依賴準(zhǔn)備1. 環(huán)境要求Node.js≥ v6.9.0Webpackv4.0.0作為 peer 依賴見 package.json2. 安裝命令$ npm install webpack-serve --save-dev如果希望先拉取源碼閱讀倉庫地址為$ git clone https://gitcode.com/gh_mirrors/we/webpack-serve安裝完成后CLI 入口指向 lib/cli.js所有可用命令行參數(shù)定義在 schemas/flags.js 中可以隨時(shí)查閱。三、30秒啟動你的開發(fā)服務(wù)器1. 最簡啟動零配置在 webpack v4 項(xiàng)目中直接運(yùn)行即可它會應(yīng)用 webpack 的零配置默認(rèn)值$ webpack-serve2. 指定配置文件啟動$ webpack-serve ./webpack.config.js $ webpack-serve --config ./webpack.config.js --port 1337兩種寫法完全等價(jià)。默認(rèn)監(jiān)聽8080端口啟動后服務(wù)器 URI 會自動復(fù)制到剪貼板可用--clipboard關(guān)閉。3. 常用命令行參數(shù)速查參數(shù)作用默認(rèn)值--port監(jiān)聽端口8080--host綁定主機(jī)localhost--open啟動后自動打開瀏覽器關(guān)--no-hmr禁用熱模塊替換開--no-reload構(gòu)建錯(cuò)誤時(shí)不自動刷新頁面關(guān)--http2啟用 HTTP2關(guān)--log-level日志級別trace/debug/info/warn/error/silentinfo 小貼士所有布爾參數(shù)都支持no-前綴寫法例如--no-reload等價(jià)于--reloadfalse。四、配置文件速成4種方式任選其一webpack-serve 基于 cosmiconfig 查找配置支持以下 4 種方式可疊加合并webpack.config.js 中的serve屬性最常見推薦serve.config.js文件CommonJS 模塊.serverc/.serverc.json文件JSON 或 YMLpackage.json中的serve字段最推薦的寫法serve屬性在 webpack.config.js 中加一個(gè)serve字段即可const path require(path); module.exports { context: __dirname, devtool: source-map, entry: [./app.js], output: { filename: ./output.js, path: path.resolve(__dirname), }, serve: { port: 1337, content: [./public], // 靜態(tài)資源目錄 }, }; 小技巧在配置中動態(tài)區(qū)分開發(fā)/生產(chǎn)模式——mode: process.env.WEBPACK_SERVE ? development : production,因?yàn)?webpack-serve 啟動時(shí)會自動設(shè)置WEBPACK_SERVE true環(huán)境變量見 lib/index.js 第 22 行。一個(gè)獨(dú)立的serve.config.js實(shí)例可參考 test/fixtures/serve.config.js。五、進(jìn)階玩法add 選項(xiàng) 3個(gè)高頻擴(kuò)展配方webpack-serve 的核心哲學(xué)是保持精簡 讓用戶用熟悉的模式擴(kuò)展。add選項(xiàng)接收一個(gè)函數(shù)參數(shù)為(app, middleware, options)app底層 Koa 應(yīng)用實(shí)例middleware提供webpack()與content()兩個(gè)訪問函數(shù)options內(nèi)部選項(xiàng)對象官方在 docs/addons/ 目錄下提供了大量可直接抄的配方需求參考文件SPA 路由 History 回退docs/addons/history-fallback.config.js代理 History 回退組合docs/addons/proxy-history-fallback.config.js代理 自定義路由docs/addons/proxy-router.config.jsGzip 壓縮express/koa 兩版docs/addons/compress/Bonjour 局域網(wǎng)發(fā)現(xiàn)docs/addons/bonjour.config.js監(jiān)聽靜態(tài)目錄變更docs/addons/watch-content.config.js以 History 回退為例摘自 docs/addons/history-fallback.config.jsmodule.exports.serve { content: [__dirname], add: (app, middleware, options) { app.use(convert(history(historyOptions))); }, };?? 注意如果你調(diào)整了中間件順序例如路由必須最后注冊需要在add中手動調(diào)用middleware.webpack()與middleware.content()webpack-serve 會識別這些調(diào)用并避免重復(fù)執(zhí)行。六、API 用法與事件監(jiān)聽編程式啟動主入口是默認(rèn)導(dǎo)出的serve函數(shù)lib/index.jsconst serve require(webpack-serve); serve({}, { config: require(./webpack.config.js) }) .then((result) { // result.app —— Koa 實(shí)例含 server 屬性與 stop 方法 // result.on —— 綁定事件 // result.options —— 凍結(jié)后的內(nèi)部選項(xiàng) });可訂閱的事件事件名觸發(fā)時(shí)機(jī)listening服務(wù)器開始監(jiān)聽連接build-started編譯器開始構(gòu)建build-finished構(gòu)建完成返回 Stats 與 Compilercompiler-error構(gòu)建出現(xiàn)錯(cuò)誤compiler-warning構(gòu)建出現(xiàn)警告事件總線實(shí)現(xiàn)在 lib/bus.js你可以在配置的on選項(xiàng)中直接訂閱例如在build-started時(shí)打印自定義日志。七、HTTPS 與常見注意事項(xiàng)HTTPS通過--https-cert、--https-key或--https-pfx--https-pass命令行參數(shù)或options.https對象開啟安全服務(wù)。與 webpack-dev-server 不同它不內(nèi)置證書生成官方建議自行生成受信任的本地證書。host 一致性host必須與熱更新客戶端的 host 保持一致否則 webpack-serve 會直接拋出錯(cuò)誤——這是為了保證 Koa 服務(wù)器與 WebSocket 服務(wù)器協(xié)同正常。靜態(tài)資源優(yōu)先級默認(rèn) webpack 產(chǎn)物優(yōu)先于content靜態(tài)文件想反過來在add中先調(diào)middleware.content()再調(diào)middleware.webpack()即可。八、總結(jié)5分鐘回顧?裝npm install webpack-serve --save-dev需 webpack v4?跑webpack-serve或webpack-serve ./webpack.config.js?配在 webpack 配置里加serve字段或?qū)憇erve.config.js?擴(kuò)add選項(xiàng) docs/addons/ 配方自由組裝代理、History、壓縮?控serve()API 事件訂閱實(shí)現(xiàn)編程化啟動與構(gòu)建反饋webpack-serve 雖然已停止迭代但它核心極簡、擴(kuò)展靠社區(qū)模式的設(shè)計(jì)思路依然是理解 webpack 生態(tài)開發(fā)服務(wù)器的優(yōu)質(zhì)范本。如果你正在維護(hù)使用它的項(xiàng)目或想對比它與 webpack-dev-server 的能力邊界本文的 README.md 與源碼文件路徑索引會是很好的導(dǎo)航起點(diǎn)。贊分享【免費(fèi)下載鏈接】webpack-serveRepository has moved:項(xiàng)目地址https://gitcode.com/gh_mirrors/we/webpack-serve點(diǎn)擊查看免費(fèi)下載相關(guān)推薦faster-whisper語音識別快速上手指南基于CTranslate2的本地轉(zhuǎn)寫faster whisper語音識別快速上手指南基于CTranslate2的本地轉(zhuǎn)寫 將 13 分鐘音頻轉(zhuǎn)成文字faster whisper 在 GPU 上人工智能語音音頻本地部署如何讓2015年老舊Mac免費(fèi)升級到最新macOS系統(tǒng)OpenCore Legacy Patcher終極指南如何讓2015年老舊Mac免費(fèi)升級到最新macOS系統(tǒng)OpenCore Legacy Patcher終極指南 你是否有一臺2015年甚至更早的Mac電腦被蘋桌面應(yīng)用操作系統(tǒng)固件5分鐘快速上手Leaf構(gòu)建你的第一個(gè)游戲服務(wù)器5分鐘快速上手Leaf構(gòu)建你的第一個(gè)游戲服務(wù)器 想要快速搭建高性能的游戲服務(wù)器Leaf是一個(gè)用Go語言編寫的開源游戲服務(wù)器框架它提供了簡單易用的接口和強(qiáng)大游戲開發(fā)后端網(wǎng)絡(luò)RPC框架創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考