webpack 4 + mockjs
一、创建项目目录
二、添加开发依赖( html-webpack-plugin、webpack、webpack-cli、webpack-dev-server、webpack-api-mocker)
如下所示位于package.json文件中
...
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.3",
"webpack-api-mocker": "^1.4.3"
},
...
使用npm install 或者 yarn install (推荐，原因你懂的)
三、创建 webpack.config.js 文件，编写相关配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const apiMocker = require('webpack-api-mocker');
module.exports = {
mode: 'development', //当前环境
entry: { //程序的启动入口
app: './src/index.js'
},
devServer: {
/****************此处星星多，注意看此处****************************/
//利用webpack-dev-server 的before 方法调用webpack-api-mocker
// path.resolve('./mocker/index.js') 中的'./mocker/index.js'为mock文件的相对路径
/***************以上只是个人的浅显理解罢了（有不同理解请交流）******************/
before(app) {
apiMocker(app, path.resolve('./mocker/index.js'), {
// 'GET /api/users/list': 'http://localhost:3000',
// 'GET /api/userinfo/:id': 'http://localhost:3000',
})
}
},
output: { //配置文件输出路径
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [ //利用模板文件生成.html
new HtmlWebpackPlugin({
title: 'webpack+react',
template: "./src/entry.ejs",
filename: "./index.html",
}),
]
};
话不多说直接上‘./mocker/index.js’文件
module.exports = {
[`GET /api/user`]: (req, res) => {
console.log('---->', req.params);
return res.json({
id: 1,
username: 'kenny',
sex: 6
});
}
}
附录1.
webpack.config.js中的entry.ejs文件
<!DOCTYPE html>
<html lang="en"> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!--看这里，看这里，请看我这里-->
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- 如果不这这样写 html-webpack-plugin 中的title是不生效的哦-->
<link rel="stylesheet" href="/favicon.png" type="text/css" />
</head> <body>
<!-- <div id="root"></div> -->
Visit :/mocker/index.js to customize the API Try it?
<hr>
<div>name:
<span id="name"></span>
</div>
<div>age:
<span id="age"></span>
</div>
</body> </html>
webpack.config.js 配置文件中的 entry下app对应值的index.js文件
fetch('/api/user', {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
})
.then((response) => response.json())
.then(data => {
console.log('data:', data);
document.getElementById('name').innerHTML = data.username;
document.getElementById('age').innerHTML = data.sex;
})
OK！接下来npm start 或者 yarn install 运行下试试吧。
效果图如下：
思维重构：以上方式多个mock文件时不就需要改动webpack.config.js文件？这种事情我是绝不允许的。各位看客请看：
解决方法：编写webpack.mocker.js文件为所有mock文件的总成，启动时自动包装mock(话不多说直接上代码)
const mock = {};
require('fs').readdirSync(require('path').join(__dirname + '/mocker')).forEach(function (file) {
Object.assign(mock, require('./mocker/' + file))
});
module.exports = mock;
webpack 4 + mockjs的更多相关文章
- [json-server] RESTful API 中，取主数据时，同时获取多个关联子表的数据
项目背景: back-end:ASP.NET Core WebAPI front-end:Vue(+vue-router +vuex +axios)(webpack)(json-server + mo ...
- vue+vuecli+webpack中使用mockjs模拟后端数据
前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...
- webpack配置备份
package.json: { "name": "webpackTest", "version": "1.0.0", & ...
- Vue+Webpack+Grunt集成
说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...
- Webpack单元测试，e2e测试
此篇文章是续 webpack多入口文件.热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用. 一.单元测试 实现单元测试框架的搭建.es6语法的应用.以及测试覆盖率的引入. 1. 需要安 ...
- Webpack多入口文件、热更新等体验
Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...
- webpack开发与生产环境配置
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...
- vue+mockjs 模拟数据，实现前后端分离开发
在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...
- 用 webpack 创建 vue 项目
1.安装支持webpack 包 npm i -D webpack webpack-cli aspnet-webpack webpack-dev-middleware webpack-hot-mi ...
随机推荐
- java循环遍历类属性 get 和set值方法
//遍历sqspb类 成员为String类型 属性为空的全部替换为"/"Field[] fields = sqspb.getClass().getDeclaredFields(); ...
- Java线程池是如何诞生的？
时间回到2003年,那时我还是一个名不见经传的程序员,但是上级却非常看好我,他们把整个并发模块,都交给了我一个人开发. 这个星期,我必须要完成并发模块中非常重要的一个功能--线程池. 注:文末有福利 ...
- Linux下wget获取ftp下目录下文件
如果某个目录下有一个文件可以使用ftp命令: get xxx 如果是某个目录下有多个文件(且不需要获取目录下子文件夹下的内容): mget * 如果是某个目录下有子目录希望获取所有子目录: wget ...
- POJ-1861 Network---最小生成树
题目链接: https://vjudge.net/problem/POJ-1861 题目大意: 有一些公司,公司之间需要连接起来.给出了哪些公司可以连接以及连接边的长度.求最小生成树中最大的边,以及最 ...
- 1.4 正则化 regularization
如果你怀疑神经网络过度拟合的数据,即存在高方差的问题,那么最先想到的方法可能是正则化,另一个解决高方差的方法就是准备更多数据,但是你可能无法时时准备足够多的训练数据,或者获取更多数据的代价很高.但正则 ...
- OpenGL 背面剔除
在OpenGL种可使用glEnable(GL_CULL_FACE)开启背面剔除功能,即把那些我们看不见的面删除.但在剔除之前我们需要定义正面和背面,这个可以用法线来理解.在数学学科中,法线是用右手法则 ...
- windows汇编环境配置
原文地址 软件下载 需要的软件已经打包,包括dosbox和MASM.如果没有这两个软件可以在下面的地址下载. http://hjwblog.com/game/汇编环境.zip 点击下载 安装dosbo ...
- Spring-framework 源码导入 IntelliJ IDEA 记录
前言 想学习spring框架,不看源码怎么行.网上有很多教程,但是自己实施起来还是稍微有点坎坷的,不过最后还是成功了.遂以此文记录. 环境说明: Idea 2017.2.5 spring-frame ...
- [LeetCode] Minimum Absolute Difference in BST 二叉搜索树的最小绝对差
Given a binary search tree with non-negative values, find the minimum absolute difference between va ...
- js switch判断 三目运算 while 及 属性操作
三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...