webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。
webpack-dev-server主要用于前端项目的本地开发和调试。
具体使用，只需要在package.json的devDependencies里添加它的依赖即可。
同样在package.json里定义dev script，执行该webpack-dev-server, 这样用命令行npm run dev就可启动webpack-dev-server.
其原理是，npm install后，webpack-dev-server.js就会自动出现在当前项目文件夹的node_modules目录里：
Webpack-dev-server.js的服务器实例通过关键字new创建出来：
在Server.js的内部实现里，第76行我们就能观察到该服务器采用nodejs的express模块实现。
Express实例创建后，通过第78行app.all('*', ... )挂接处理函数，这个箭头函数(req,res,next) => { 负责处理所有发往这个服务器的HTTP请求。
第92行就是Server.js里webpackDevMiddleware的初始化过程。
现在我们就来看看浏览器里输入localhost:8080后会发生什么事情。
根据前面的描述，浏览器发起前往localhost:8080的请求被webpackDevMiddleware服务，见下图调试截图，其中变量req.url为/，这是我们期望看到的，因为localhost:8080后面没有跟任何路径。
最终会将执行流投递到processRequest函数里，第53行代码说明，如果HTTP请求路径/后没有子路径，则默认返回一个硬编码的index.html
谜团就这样解开了。
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
相关推荐
* 在 webpack.config.js 中添加 devServer:{inline:true} 2. 当以 Node.js API 启动 Webpack-dev-server 时，我们也需要做两点： * 由于 Webpack-dev-server 的配置中无 inline 选项，我们需要添加 webpack-dev-...
尝试将 webpack-dev-server api 与 gulp 一起使用时出错。 这个 webpack 配置似乎配置正确，因为运行 CLI webpack-dev-server是...[10:35:59] [webpack-dev-server] http://localhost:8080/index.html /home/vincent/w
首先，理解 `webpack-dev-server` 的工作原理至关重要。它会监听项目文件的变化，一旦检测到变动，便自动重新构建并更新页面。默认情况下，它会以运行 `webpack-dev-server` 命令的目录作为请求的资源路径。这意味着...
6. **启动服务**：最后，运行`webpack-dev-server`，它会自动启动服务器并监控文件变化。 ``` npx webpack-dev-server --config webpack.config.js ``` 以上就是Webpack热更新的基本配置和工作原理。当你保存...
npm start （运行 webpack-dev-server 和一个简单的 nodejs express 服务器，这是一个同构的解决方案）； 或者使用npm run start2 （它运行 webpack-dev-server 和一个简单的 python 服务器，它根本不进行服务器端...
无webpack的tex-packer Webpack免费纹理打包器插件基于 安装 $ npm安装webpack-free-... 'webpack-dev-server/client?http://localhost:8080' ] , output : { filename : 'index.js' } , mode : 'development' , p
Webpack Dev Server 的配置主要通过 `devServer` 字段在 Webpack 配置文件（通常为 `webpack.config.js`）中进行。常见配置选项包括： 1. **host**：指定服务器运行的主机名，默认为 `localhost`。 2. **port**：...
Webpack模板 Webpack是一个模块捆绑器。 它的主要目的是捆绑JavaScript文件以供在浏览器中使用，但它也能够转换，捆绑或打包几乎任何资源或资产。 作者：| 构建设置： # Download repository: git clone ...
最后，我们可以访问页面 http://localhost:8080/index.html，修改 CSS 文件后，页面将自动刷新，显示最新的结果。 总结来说，使用 Webpack-dev-server 可以实现热加载自动刷新的功能，使得我们的开发效率大大提高。...
入门npm init npm i webpack node-libs-browser --save-dev 设置webpack.config.js 设置入口点build/index.html 设置npm build到webpack使用 Webpack 开发npm i webpack-dev-server --save-dev 使用以下命令将npm ...
塞恩斯伯里的娱乐测验 你好塞恩斯伯里...然后打开http://localhost:8080/webpack-dev-server/ 小笔记 Flickr用户经常上传他们的图片：再次执行相同的搜索可能会向您返回其他图片，因此选择的持久性并非易事。 这
1. **安装Webpack Dev Server**: 运行`npm install webpack-dev-server@3.1.10 webpack-cli@3.1.2 --save`。 2. **配置Webpack Dev Server**: ```javascript // webpack.config.js const path = require('path');...
运行webpack-dev-server，准备通过热重载进行编码 yarn start 分享 与具有Internet连接的任何人共享您的localhost运行的应用程序 yarn ngrok 建立 捆绑您的应用。 它将创建index.html ， main.[hash].js ， vendor....
devServer: { contentBase: './dist', hot: true }, ``` 在`package.json`中： ``` "scripts": { "start": "webpack-dev-server --config webpack.config.js --hot" } ``` 10. **运行项目**：最后，...
【Webpack 01 配置】手把手从0开始启动、打包HTML和JS文件 Webpack 是一个现代JavaScript应用程序的模块打包工具。它将项目中的各种资源（如JavaScript、CSS、图片等）视为“模块”，并将它们转换并打包到一个或多...
devServer: { contentBase: './dist', // 指定服务器根目录 hot: true // 启用热模块替换 } }; ``` 创建 `src` 文件夹，并在其中创建 `index.js` 作为入口文件，引入 React 并编写基本的 React 组件： ```...
注意，`webpack-dev-server`需要配置`publicPath`以使HMR生效。在`webpack.config.js`中设置`publicPath`，然后在`app.vue`中做修改，观察不同`publicPath`设置下页面的实时更新行为。你会发现，当修改模板...
Webpack模板Webpack是一个模块捆绑器。 它的主要目的是捆绑JavaScript文件以供在浏览器中使用，...//localhost:8081/npm run dev# Output will be at dist/ foldernpm run build项目结构： src/index.html主应用程序HTM
多页 使用Vue 2，Webpack4和Element-UI的现代Vue.js多页cli ... 访问http：// localhost：8010 / customer / index.html 建造 $ npm run build $ node server.js # listen 2333 port 访问http：// localhost：2333 /