# devServer 1. 提供http服务，而不是本地文件预览 2. 监听文件变化，自动刷新网页 3. 支持sourceMap，方便调试 自动刷新网页原理：  ## 1. 如何集成devServer ### 1. 安装 webpack-dev-server ``` npm i webpack-dev-server --save-dev ``` 遇到的问题： *Cannot find module 'webpack-cli/bin/config-yargs'* 问题解决参考：[Error: Cannot find module 'webpack-cli/bin/config-yargs' #1948](https://github.com/webpack/webpack-cli/issues/1948) If you upgrade webpack to 5. \*, and webpack cli to 4. \*, an error will be reported: ~~~ Error: Cannot find module 'webpack-cli/bin/config-yargs' ~~~ Temporary solution:Back off webpack cli to version 3. \* for example: ~~~ "webpack-cli": "^ 3.3.12" ~~~ ### 2. package.json 配置script ``` "scripts": { "dev": "webpack-dev-server", } ``` 这时就可以成功启动devserver了。 ### 3. 支持 source Map ``` "scripts": { "dev": "webpack-dev-server --devtool source-map", } ``` ## 2. 配置项 ### 1. contentBase 配置devserver http服务器的文件根目录 如果有一些额外的文件需要devserver使用 ``` devServer： { contentBase: path.join(__dirname, 'public') } ``` devServer通过http服务暴露出的文件来源：