10 webpack4.0学习笔记——热替换_devServer

概述

        此系列文章从介绍webpack4.0开始，然后一步步分别介绍入口/出口文件配置、loader使用、插件使用等，到目前为止，webpack4.0基础的配置讲解就差不多已经完成了，针对于loader和插件的使用，我们各自挑了三个比较重要的loader和插件来进行介绍，其他的loader和插件使用方法跟这几种介绍的方法类似。

        然后我们每一篇文章中使用的demo其实是继续沿用上一文中代码，所以到目前为止的话，这个demo已经具备了一个简单的react项目代码的级别了，上一文中的附加内容部分，我们更是将我们之前新建的react组件渲染到了页面上。但是在这个过程中呢，大家可能发现了，我们每次更改内容的时候，都要执行一次打包，然后再将结果文件在浏览器运行，这样效率是非常低的，在实际开发中并不推荐，所以接下来本文介绍一种webpack的热替换功能。

        webpack4.0的热替换功能，其实是devServer这个插件在起作用，所以接下来的文章我们对此插件做一个简单介绍。

 

具体操作步骤

        1、根据官网所示安装此插件，如下：

         2、然后在配置文件中，跟plugins和module属性字段同等级别的位置处添加devServer的配置代码，如下：

 

        上述代码中，contentBase的含义是系统启动的文件路径，这个路径要和出口配置处的路径一致，即跟output属性字段中的路径一致；compress含义是指定是否压缩，我们选择默认的压缩；port是指定我们这个devServer内置的服务器的运行端口。

        3、安装配置完以后，那我们就可以运行启动这个devServer服务器了，这就问题来了，我们的启动命令是什么呢，之前的“webpack”命令肯定不管用，它只是一个打包命令；运行“webpack-dev-server”命令，报错说没有找到此命令，不能识别，这是因为我们是在项目中安装的此插件，并没有全局安装。这时候，我们可以改变package.json文件中的script属性字段下的信息来完成配置，如下：

        4、更改完成后，我们在命令行使用命令“npm run start”来启动运行我们的代码，如下：

         上图可知，运行命令时报错了，查阅资料发现是webpack-dev-server的版本太高导致的，但是卸载掉之前安装的版本，然后重新一个2.11.3以下左右的版本的话还是不行。最后是将package.json文件中的script属性字段配置修改后就可以了，如下：

 

        然后通过命令“npm run dev”来启动运行，如下：

         细心地同学可能发现，上图中地址是8080的端口，但是我们之前配置文件写的是8008端口，这是因为刚才报错的时候我怀疑是端口占用问题，所以修改过的，大家不用理会，启动运行后，webpack配置文件中是那个端口，浏览器就运行那个端口即可。

 

        5、接下来，我们在HelloReact组件中修改代码，然后保存，浏览器自动刷新渲染到页面了，如下所示：

         这样就不会像之前的操作一样，我们修改一次代码后还要再执行打包，通过热加载，可以实时渲染我们的页面。

 

 

总结

        本文主要介绍了webpack4.0的热加载技术，通过基本介绍，实现了webpack的热加载配置和基本操作，到此为止呢，我们此系列文章的demo也接近成为了一个小项目代码的雏形，后续的知识，就靠大家自己研究了。