webpack理解日记

image.png

若在使用webpack-dev-server的时候,未在devServer配置中添加publicPath属性,这时候页面的热更新会失效,因为此时,会去读取请求路径下的硬盘源文件,但是我们对代码的每一次修改,webpack-dev-server并不会直接打包到硬盘的源文件中,而是直接存放在内存中

ps:可以看到，我们在配置中添加了一个devServer对象，它是专门用来放webpack-dev-server配置的。webpack-dev-server可以看作一个服务者，它的主要工作就是接收浏览器的请求，然后将资源返回。当服务启动时，会先让Webpack进行模块打包并将资源准备好（在示例中就是bundle.js）。当webpack-dev-server接收到浏览器的资源请求时，它会首先进行URL地址校验。如果该地址是资源服务地址（上面配置的publicPath），就会从Webpack的打包结果中寻找该资源并返回给浏览器。反之，如果请求地址不属于资源服务地址，则直接读取硬盘中的源文件并将其返回。