JS基础编程课件06_Webpack搭建本地服务器.pdf

Webpack搭建本地服务器

王红元coderwhy

目录

content

1开启本地服务器

2HMR热模块替换

3devServer配置

4开发和生成环境

coderwhy为什么要搭建本地服务器？

◼目前我们开发的代码，为了运行需要有两个操作：

操作一：npmrunbuild，编译相关的代码；

操作二：通过liveserver或者直接通过浏览器，打开index.html代码，查看效果；

◼这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成编译和展示；

◼为了完成自动编译，webpack提供了几种可选的方式：

webpackwatchmode；

webpack-dev-server（常用）；

webpack-dev-middleware；

coderwhywebpack-dev-server

◼上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：

当然，目前我们可以在VSCode中使用live-server来完成这样的功能；

但是，我们希望在不适用live-server的情况下，可以具备livereloading（实时重新加载）的功能；

◼安装webpack-dev-server

npminstallwebpack-dev-server-D

◼修改配置文件，启动时加上serve参数：

◼webpack-dev-server在编译之后不会写入到任何输出文件，而是将bundle文件保留在内存中：

事实上webpack-dev-server使用了一个库叫memfs（memory-fswebpack自己写的）

coderwhy认识模块热替换（HMR）

◼什么是HMR呢？

HMR的全称是HotModuleReplacement，翻译为模块热替换；

模块热替换是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

◼HMR通过如下几种方式，来提高开发的速度：

不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；

只更新需要变化的内容，节省开发的时间；

修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

◼如何使用HMR呢？

默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可（默认已经开启）；

在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是livereloading；

coderwhy开启HMR

◼修改webpack的配置：

◼浏览器可以看到如下效果：

◼但是你会发现，当我们修改了某一个模块的代码时，依然是刷新的整个页面：

这是因为我们需要去指定哪些模块发生更新时，进行HMR；

coderwhy框架的HMR

◼有一个问题：在开发其他项目时，我们是否需要经常手动去写入module.hot.accpet相关的API呢？

比如开发Vue、React项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？

◼事实上社区已经针对这些有很成熟的解决方案了：

比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；

比如react开发中，有ReactHotLoader，实时调整react组件（目前React官方已经弃用了，改成使用react-refresh）；

coderwhyhost配置

◼host设置主机地址：

默认值是localhost；

如果希望其他地方也可以访问，可以设置为；

◼localhost和的区别：

localhost：本质上是一个域名，通常情况下会