【免费下载链接】webpack-serveRepository has moved:项目地址https://gitcode.com/gh_mirrors/we/webpack-serve点击查看免费下载webpack-serve是一款轻量、现代、灵活的webpack 开发服务器development server。相比 webpack-dev-server它的核心思路是保持精简内置热更新HMR、静态资源服务、HTTPS 等基础能力其余功能代理、History 回退、压缩等通过add选项用几行熟悉的 Koa 中间件模式即可扩展。本文将带你5 分钟完成安装、启动与常用配置快速跑起你的开发环境。⚠️版本提示该项目已标记为 DEPRECATED见 README.md官方建议使用仍在积极维护的 webpack-dev-server。本文仍完整介绍其用法适合学习其设计理念、维护已有项目或了解其扩展机制。一、为什么值得了解 webpack-serve特性webpack-serve说明热模块替换 HMR✅ 内置基于 webpack-hot-client保存代码自动生效静态资源服务✅ 内置通过content选项指定目录HTTPS / HTTP2✅ 内置命令行即可开启零配置启动✅ 支持依赖 webpack v4 的零配置默认值功能扩展add选项用 Koa 中间件模式自由组装不捆绑冗余功能它的被低估之处在于很多开发者只把开发服务器当作启动命令而 webpack-serve 的add 扩展机制 事件总线设计让代理、路由、History 回退等能力都以极简方式接入代码可读性和可维护性都很高核心实现见 lib/app.js 与 lib/middleware/WebpackMiddleware.js。二、一键安装环境与依赖准备1. 环境要求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所有可用命令行参数定义在 schemas/flags.js 中可以随时查阅。三、30秒启动你的开发服务器1. 最简启动零配置在 webpack v4 项目中直接运行即可它会应用 webpack 的零配置默认值$ webpack-serve2. 指定配置文件启动$ webpack-serve ./webpack.config.js $ webpack-serve --config ./webpack.config.js --port 1337两种写法完全等价。默认监听8080端口启动后服务器 URI 会自动复制到剪贴板可用--clipboard关闭。3. 常用命令行参数速查参数作用默认值--port监听端口8080--host绑定主机localhost--open启动后自动打开浏览器关--no-hmr禁用热模块替换开--no-reload构建错误时不自动刷新页面关--http2启用 HTTP2关--log-level日志级别trace/debug/info/warn/error/silentinfo 小贴士所有布尔参数都支持no-前缀写法例如--no-reload等价于--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 中加一个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], // 静态资源目录 }, }; 小技巧在配置中动态区分开发/生产模式——mode: process.env.WEBPACK_SERVE ? development : production,因为 webpack-serve 启动时会自动设置WEBPACK_SERVE true环境变量见 lib/index.js 第 22 行。一个独立的serve.config.js实例可参考 test/fixtures/serve.config.js。五、进阶玩法add 选项 3个高频扩展配方webpack-serve 的核心哲学是保持精简 让用户用熟悉的模式扩展。add选项接收一个函数参数为(app, middleware, options)app底层 Koa 应用实例middleware提供webpack()与content()两个访问函数options内部选项对象官方在 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 局域网发现docs/addons/bonjour.config.js监听静态目录变更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))); }, };⚠️ 注意如果你调整了中间件顺序例如路由必须最后注册需要在add中手动调用middleware.webpack()与middleware.content()webpack-serve 会识别这些调用并避免重复执行。六、API 用法与事件监听编程式启动主入口是默认导出的serve函数lib/index.jsconst serve require(webpack-serve); serve({}, { config: require(./webpack.config.js) }) .then((result) { // result.app —— Koa 实例含 server 属性与 stop 方法 // result.on —— 绑定事件 // result.options —— 冻结后的内部选项 });可订阅的事件事件名触发时机listening服务器开始监听连接build-started编译器开始构建build-finished构建完成返回 Stats 与 Compilercompiler-error构建出现错误compiler-warning构建出现警告事件总线实现在 lib/bus.js你可以在配置的on选项中直接订阅例如在build-started时打印自定义日志。七、HTTPS 与常见注意事项HTTPS通过--https-cert、--https-key或--https-pfx--https-pass命令行参数或options.https对象开启安全服务。与 webpack-dev-server 不同它不内置证书生成官方建议自行生成受信任的本地证书。host 一致性host必须与热更新客户端的 host 保持一致否则 webpack-serve 会直接抛出错误——这是为了保证 Koa 服务器与 WebSocket 服务器协同正常。静态资源优先级默认 webpack 产物优先于content静态文件想反过来在add中先调middleware.content()再调middleware.webpack()即可。八、总结5分钟回顾✅装npm install webpack-serve --save-dev需 webpack v4✅跑webpack-serve或webpack-serve ./webpack.config.js✅配在 webpack 配置里加serve字段或写serve.config.js✅扩add选项 docs/addons/ 配方自由组装代理、History、压缩✅控serve()API 事件订阅实现编程化启动与构建反馈webpack-serve 虽然已停止迭代但它核心极简、扩展靠社区模式的设计思路依然是理解 webpack 生态开发服务器的优质范本。如果你正在维护使用它的项目或想对比它与 webpack-dev-server 的能力边界本文的 README.md 与源码文件路径索引会是很好的导航起点。赞分享【免费下载链接】webpack-serveRepository has moved:项目地址https://gitcode.com/gh_mirrors/we/webpack-serve点击查看免费下载相关推荐faster-whisper语音识别快速上手指南基于CTranslate2的本地转写faster whisper语音识别快速上手指南基于CTranslate2的本地转写 将 13 分钟音频转成文字faster whisper 在 GPU 上人工智能语音音频本地部署如何让2015年老旧Mac免费升级到最新macOS系统OpenCore Legacy Patcher终极指南如何让2015年老旧Mac免费升级到最新macOS系统OpenCore Legacy Patcher终极指南 你是否有一台2015年甚至更早的Mac电脑被苹桌面应用操作系统固件5分钟快速上手Leaf构建你的第一个游戏服务器5分钟快速上手Leaf构建你的第一个游戏服务器 想要快速搭建高性能的游戏服务器Leaf是一个用Go语言编写的开源游戏服务器框架它提供了简单易用的接口和强大游戏开发后端网络RPC框架创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考