跳到主要内容

webpack-dev-server

配置项

  • contentBase:指定服务器的根目录,默认为项目根目录。 port:指定服务器运行的端口号,默认为 8080。
  • host:指定服务器运行的主机地址,默认为 localhost。
  • hot:启用热模块替换(Hot Module Replacement),在代码变更时实时更新页面而不是重新加载整个页面,默认为 false。
  • inline:将热模块替换的 client 脚本嵌入到 bundle 中,配合 hot 选项使用,默认为 true。
  • watchContentBase:监听 contentBase 下的文件变化,当文件变化时会触发重新加载,默认为 false。
  • publicPath:指定构建后文件在服务器上的路径,默认为 '/'
  • compress:启用 gzip 压缩,减小构建后文件的体积,默认为 false。
  • open:启动服务器后自动在默认浏览器中打开页面,默认为 false。
  • historyApiFallback:当使用 HTML5 History API 时,任意的 404 响应都可能需要被替代为 index.html。设置为 true 时,所有路径都会执行 index.html,默认为 false。
  • proxy:代理请求到其他服务器,解决开发过程中的跨域问题。
  • overlay:在浏览器中显示编译错误和警告,默认为 true。
  • stats:控制编译信息的显示方式,可选值为 'errors-only', 'minimal', 'none' 等。
  • headers:在所有响应中添加首部内容,例如设置跨域访问。

主要功能

  1. 实时编译和打包:webpack-dev-server 可以在开发过程中实时监听源代码的变化,一旦发生变化就会自动触发重新编译和打包,从而确保开发者在开发过程中看到最新的变化。
  2. 热模块替换(Hot Module Replacement,HMR):webpack-dev-server 支持热模块替换功能,当源代码发生变化时,它会使用热更新技术将变化的模块替换到运行中的应用程序中,而不需要完全刷新页面,从而实现实时预览和快速调试。
  3. 静态资源服务:除了编译打包功能之外,webpack-dev-server 还可以作为静态资源服务器,可以方便地访问项目中的静态资源文件,如 HTML、CSS、JavaScript 等。
  4. 代理功能:webpack-dev-server 提供了代理功能,可以将请求代理到其他服务器,用于解决开发过程中跨域请求的问题。
  5. 支持 HTTPS:webpack-dev-server 支持使用 HTTPS 协议进行通信,可以在开发过程中模拟真实环境下的安全连接。
  6. 自定义配置:开发者可以根据项目的需求,通过配置文件自定义 webpack-dev-server 的行为,包括监听端口、自定义路由、设置代理等。

webpack-dev-server 支持两种方式刷新页面

全页面刷新:默认情况下,webpack-dev-server 会在每次文件发生改变时触发全页面的刷新,即重新加载整个页面。这种方式会重新加载所有资源,包括 HTML、CSS、JavaScript 等,因此会有一定的性能开销,但能确保页面的状态是最新的。

热模块替换(Hot Module Replacement,HMR):webpack-dev-server 还支持热模块替换(HMR),它是一种更加高效的刷新方式。当某个模块发生变化时,webpack-dev-server 会使用热更新技术只替换发生变化的模块,而不重新加载整个页面。这样可以保持应用程序的状态,避免了重新加载页面时可能带来的用户体验问题,同时也能大大减少刷新页面的时间。

在大多数情况下,建议使用热模块替换(HMR)来刷新页面,因为它能够提供更好的开发体验和更快的开发速度。要启用热模块替换,只需在 webpack 配置中添加 hot: true 选项即可:

// webpack.config.js
module.exports = {
// 其他配置...
devServer: {
hot: true
}
};

使用热模块替换时,当某个模块发生变化时,webpack-dev-server 会自动将变化的模块替换到运行中的应用程序中,而不需要刷新整个页面,从而提高了开发效率。