#Webpack 如何使用 DevServer
Webpack 是一个流行的打包工具,它可以将多个 JavaScript 文件、图片、CSS 等文件打包成一个或多个文件。使用它可以轻松地将您的前端项目构建出一个文件,这是传统方法所不具备的优点。
但是,每次修改前端代码都需要手动重新构建并刷新页面是一件很麻烦的事情,这个问题便出现了:如何快速地预览我们修改的前端代码呢?答案是 DevServer。
##什么是 DevServer?
Webpack DevServer 是一个运行于内存中的 Web 服务器,它能够为您提供一个方便的开发环境。DevServer 可以做到以下几点:
- 自动构建和编译;
- 自动刷新浏览器,使页面可以直接保存后查看;
- 支持热替换,当您修改了某个组件时,只需要刷新该组件而不是整个页面。
##如何使用 DevServer?
Webpack 自带了 DevServer,在 webpack.config.js 中可以配置,示例如下:
-------------- - - -- --- ----- ---------- - ------------ --------- -- ------- ------------- ----- ---- -- ------ - -
运行命令 webpack-dev-server
即可启动 DevServer,打开浏览器访问 http://localhost:9090 即可访问到网站。
但是这样子的方式每次更改代码的时候需要手动刷新页面,每次修改内容都需重新构建 webapck,这样子非常繁琐,所以我们可以使用热模块替换。
##热模块替换
Webpack Hot Module Replacement(热模块替换)可以在应用运行时替换、添加和删除模块,而不需要整个页面重新加载。
在 webpack.config.js 中修改以下配置:
----- ------- - ------------------- -------------- - - -- --- ----- ---------- - ------------ --------- -- ------- ------------- ----- ----- -- ------ ---- ---- -- ----- -- -------- - --- ------------------------------------ -- ------- - -
在浏览器中页面上的代码更改时,将自动更新。而且,这种方式不需要刷新整个页面,只需要刷新改变的代码。
##总结
使用 webpack-dev-server 可以让我们在开发过程中更加快速的预览页面效果,而且使用热模块替换更能提升效率。在实际工作中我们可以根据项目需要,使用 webpack-dev-server 来搭建我们的本地服务器。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64f6d45ef6b2d6eab3f5cb6e