webpack+express搭建两个虚拟服务实现前端MVC开发

前言

趁空闲时间整理一篇webpack+express开发文档记录备孕。

正文

首先，我们需要完成一个一边编写一边能够预览webpack打包后的项目前端部分，然后模拟后端给出的接口
我们假设后端会给我们一个类似这种的接口：http://www.ckotham.com/userlist，正常来说是请求一个用户列表的接口，
那么我们的express可以搭建一个本地的服务器，假设端口为7600，
然后express就会像后台一样给出一个类似的数据接口譬如：http://127.0.0.1:7600/userlist

等到项目开发尾声前后端联调的时候，我们只需要把预设的127.0.0.1:7600替换成www.ckotham.com即可

实现

首先安装webpack+express就不再重复了

webpack - devServer

第一：确保需要安装的依赖

$ npm i html-webpack-plugin
$ npm i webpack-dev-server

第二：webpack.config.js文件中配置devServer

var config = {
	entry: '',
	output: '',
	plugins: [
		new HtmlWebpackPlugin({
			//....
		})
	],
	devServer: {
		port: 7500 //这个为基于webpack的http服务
	}
}

第二：package.json的执行脚本文件配置

"script":{
	"build": "webpack",
	"dev": "webpack-dev-server"
}

注：npm run build 为打包，我们开发的时候可以不需要打包，等开发自测完成再打包不影响，这里先把build预设好

这个时候就可以使用指令 npm run dev ，然后浏览器中输入127.0.0.1:7500，即可预览我们通过webpack打包后代码的渲染结果了

express

express搭架本地服务就不做过多的解释了，不难，可以参考我的另外一篇文章node笔记之nodejs+express+ajax实现前后端分离开发
然后把bin文件夹下的www文件中的默认3000改成7600，这样好记点，比如7500是本地，7600是假设以后后台给的接口

然后在编辑器下开两个终端terminal

窗口A： $ npm run dev // 打开webpack服务
窗口B： $ npm start //打开express服务

窗口A：

窗口B：
然后在浏览器中打开http://127.0.0.1:7500即可访问http://127.0.0.1:7600里面写的业务逻辑了
如下图：

到此，前端开发的时候可以一边对打包完成后的前端模块预览并调试，而且可以做到和模拟后台联动，不需要管后台用的什么语言，只需要确定接口地址和一些特定的路由字段等即可。
等到项目正式测试的时候再打包的entry文件把接口预设路径修改即可。省时省心独立