在通过webpack命令编译源码时，如果我们修改了源码，需要重新执行命令才能看到编译后的效果。这极大地影响了开发效率。如果有办法，当文件被修改时，webpack会自动监听并重新编译，并反馈给开发者，让开发更高效的进行。watch当我们通过webpack执行命令时，编译完成后进程会停止，但是webpack--watch编译完成后，进程不会停止，当文件内容改变时，会重新编译操作-执行。项目中有两种配置方式。package.json中的配置命令webpack.config.js中的配置参数//package.json"scripts":{"build":"webpack","watch":"webpack--watch",},//webpack.config.jsmodule.exports={watch:true,};在package.json中配置通过npmrunwatch执行命令，其实就是执行webpack--watch，在webpack.config.js中配置wath参数，可以直接通过npmrunbuild编译webpack-dev-server并通过watch命令，每次重新编译都会生成新的文件，包括js、html、css、图片资源，效率不高，而且通过开启服务，在浏览器中显示html页面的方式是每次刷新页面。以上问题可以通过webpack-dev-server来解决，它不会每次编译都重新生成文件，而是节省了内存资源。通过npminstallwebpack-dev-server-D安装依赖，在package.json中配置//package.json"scripts":{"build":"webpack","serve":"webpackserve"}，执行npmrunserve编译完成后该命令不会终止进程。当文件改变时，它会再次重新编译。这时候会启动一个服务。通过http://localhost:8080/访问浏览器中的HotModuleReplace至此，每次修改文件，整个页面都会重新加载。在开发过程中，随着项目的增长，重新加载所有页面的时间会越来越长。有时只修改某些样式，只更新修改的内容。开发效率更高。这时候我们可以通过HotModuleReplace（模块热替换）来实现，需要在webpack.config.js中开启，需要使用HotModuleReplace的地方是通过module.hot.accept引入的。//webpack.config.jsmodule.exports={devServer:{hot:true,},};//index.jsimport'./math';if(module.hot){module.hot.accept('./math',()=>{console.log('math文件已被修改');});}导入的math.js文件被修改时,执行修改后的部分和修改后的回调函数。hotOnly当源码编译错误解决后，会刷新浏览器，重新加载所有内容。如果希望编译错误由热更新来处理，则需要设置hotOnly属性。devServer:{hot:true,hotOnly:true,}此时修复错误后，只会更新修复后的文件。compresscompress属性表示是否对编译后的资源进行压缩。打开后会使用gzip压缩方式，在响应头Content-Encoding中标识，浏览器会自动解压gzip文件并用compress:true打开，bundle.js文件会从原来的压缩367kb到93kb。比如本地项目运行在8000端口，访问接口http://localhost:9000/math会跨域报错项目在开发的时候，如果接口请求有跨域的情况，可以通过devServer中的proxy属性配置代理即可解决。发送请求时，直接使用/api而不是http://localhost:9000/module.exports={devServer:{proxy:{'/api':{target:'http://localhost:9000/',},},},};通过fetchconsturl='/api/math'发送网络请求；fetch(url).then((res)=>{console.log('then',res);returnres.text();}).then((res)=>{console.log('res',资源);});请求成功，得到response，但是这时候我们发现请求的url地址多了一个“/api”，请求源地址还是8000端口，可以把/api换成pathRewrite属性，并且changeOrigin修改请求host属性等参数host设置主机地址port设置端口open编译后是否自动打开浏览器publicPath指定index.html文件包引用的基本路径contentBase为引入的静态资源提供服务（默认值指向当前目录的路径)watchContentBase当引用的静态资源发生变化时，是否刷新浏览器集成上面devServermodule.exports的配置.exports={devServer:{hot:true,contentBase:path.resolve(__dirname,'./public'),watchContentBase:true,hotOnly:true,port:8000,open:true,compress:true,proxy:{'/api':{target:'http://localhost:9000/',pathRewrite:{'/api':'',},changeOrigin:true,},},},};配置devServer的属性，让我们的开发变得更有效率~以上就是webpackdevserver和模块热替换相关的总结。更多关于webpack的内容可以参考我的其他博文，正在更新中~
