随着互联网应用工程规模的日益複杂化和精细化我们在开发一个标准web应用的早已开始告别单干模式,为了提升开发效率前后端分离的需求越来越被重视,前端负责展現/交互逻辑后端负责业务/数据接口,基本上也成为了我们日常项目分工中的标配但是前后端分离一直以来都是一个工程概念,每个团隊在实现工程中都会基于自身的技术栈选择和开发环境进行具体的实现本文便根据自身团队在webapck开发中搭建的前后端分离开发环境进行部汾叙述。
目前业界比较有代表性的前后端分离的例子是SPA(Single-page application)所有用到的展现数据都是后端通过异步接口(AJAX/JSONP/WEBSOCKET)的方式提供的,现如今最火的前端框架如:React Vue,Angular等也都推荐采用SPA的模式进行开发并且从组件化数据流,状态容器再到网络请求单页路由等都给出了完善的全家桶方案。从某种意义上来说SPA确实做到了前后端分离,但这种方式存在如下几个亟待问题:
基于webpack chunk的前后端分离开发环境实战[/caption] 由此可见我们理想化的开发环境应根据具备以下几点要求:
webpack chunk本身的定位是一个资源管理和打包构建工作,本身的强大之处在于对各种静态资源的依赖汾析和预编译在实际开发中官方还推荐了一个快速读取webpack chunk配置的server环境
模块化打包:webpack chunk 会将项目的资源文件当成一个一个模块模块之间会有依赖关系。webpack chunk 将会对这些有依赖关系的文件进行处理让浏览器能够识别,最后将应用程序需要的每个模块打包成一个或者多个 bundle