前面写过，我们知道在开发中，需要先打包源码，然后运行，然后在浏览器中打开。每次修改都必须遵循此步骤。那么，有什么办法可以省略这么多繁琐的步骤呢？可以，但必须满足以下要求：必须能够使用HTTP服务运行，而不是以文件形式预览。这样可以更接近生产环境的状态，项目中可能需要使用类ajax的API，访问文件时会出现很多问题。我们修改代码后，webpack可以自动完成构建，然后浏览器可以实时显示最新的运行结果。这样可以减少开发过程中额外的重复操作，同时让我们更加专注。为了提高效率，我们需要能够提供SourceMap支持。这样在运行过程中出现的错误就可以快速定位到源代码中，而不是打包后的结果中，方便我们快速定位错误和调试应用程序。webpack自动编译完全可以满足以上需求。用法是：在启动webpack的时候，加上一个--watchcli参数，webpack就会开始以监控模式运行。打包完成后，cli不会立即退出，而是等待文件更改再次生效，直到我们手动结束或者出现不可控的异常。#我们可以先npm全局安装browser-sync模块，然后使用这个模块$npmibrowser-sync-g$browser-syncdist--watch#或者使用npx直接使用远程模块$npxbrowser-syncdist--watch和我们可以看到运行终端显示后：npxbrowser-syncdist--watch[Browsersync]AccessURLs:------------------------------------本地：http://localhost:3000外部：http://192.168.99.161:3000----------------------------------------UI:http://localhost:3001UIExternal:http://localhost:3001我们看到虽然这种webpack+browser-sync的方式满足了我们的需求，但是还有缺点多：操作繁琐，需要同时使用两个工具，需要了解的内容较多，学习成本效率低，因为webpack全程会把文件写入磁盘，并且browser-sync会重新读取，流程会设计成大量的磁盘读写操作，引导效率低。为此，webpack官方推出了开发工具，可以提供开发服务器，自动编译、浏览器自动刷新等一系列开发友好的功能都集成在一起。推出的初衷是为了提高开发者的日常开发效率。使用这个工具可以解决前面的问题。$npmiwebpack-dev-server-D$npxwebpack-dev-server当运行webpack-dev-server命令时，wbepack会自动启动http-server服务为我们生成的静态文件提供服务器服务，并提供我们生成的文件打包服务。其工作流程大致如下：执行webpack-dev-server命令启动http服务。Webpack构建并监视文件更改。如果有变化，则进入新一轮的webpack构建。需要注意的是，webpack-dev-server为了提高打包效率，不包含文件。不写入磁盘，而是将文件暂存在内存中，然后通过http-server获取文件，减少了不必要的磁盘读写操作。静态资源访问webpack-dev-server会默认将所有的构建结果和输出文件作为开发服务器的资源文件，输出文件只要经过webpack打包就可以直接访问使用。实际使用webpack时，插件copy-webpack-plugin一般在上线前都会留在包中，但在开发过程中一般不会用到。因为在开发过程中，我们会频繁的进行打包任务，假设这个目录文件中需要复制的文件又多又大，如果我们每次构建都需要执行插件，那么打包的开销就是比较大，施工速度会比较慢。衰退。实际生产环境中可以直接访问的API，回到开发环境后，再次访问这些API会造成跨域请求问题。当然我们可以使用cors，但是必须后台支持。在开发阶段解决这个跨域请求问题最好的办法就是在开发服务器配置一个后端API代理服务，将后端接口服务代理到本地开发服务地址。我们可以添加pathRewrite属性来实现代理路径重写。重写规则是将路径开头的/api替换为空。这样，当我们请求代理接口http://localhost:9000/api/users时，就会代理请求目标接口http://api.github.com/users。devServer:{proxy:{"/api":{target:"http://api.github.com",pathRewrite:{"^/api":""//替换代理地址中的/api}}},contentBase:path.join(__dirname,"dist"),compress:true,port:9000}参考文章《webpack原理与实践》《webpack中文文档》写在最后这篇文章主要讲解如何配置DevServer来提高我们本地的开发效率，其实就是使用webpack代理方式，在请求目标接口时通过本地代理请求，可以避免开发阶段的跨域问题。
