一、创建项目目录

二、添加开发依赖( 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的更多相关文章

  1. [json-server] RESTful API 中，取主数据时，同时获取多个关联子表的数据

    项目背景: back-end:ASP.NET Core WebAPI front-end:Vue(+vue-router +vuex +axios)(webpack)(json-server + mo ...

  2. vue+vuecli+webpack中使用mockjs模拟后端数据

    前言 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTM ...

  3. webpack配置备份

    package.json: { "name": "webpackTest", "version": "1.0.0", & ...

  4. Vue+Webpack+Grunt集成

    说明 Vue.Grunt.Webpack的知识请看官方网站 Grunt Tasks:构建.开发调试.打包,命令:grunt build,grunt default,grunt zipall... We ...

  5. Webpack单元测试，e2e测试

    此篇文章是续 webpack多入口文件.热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用. 一.单元测试 实现单元测试框架的搭建.es6语法的应用.以及测试覆盖率的引入. 1. 需要安 ...

  6. Webpack多入口文件、热更新等体验

    Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...

  7. webpack开发与生产环境配置

    前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...

  8. vue+mockjs 模拟数据，实现前后端分离开发

    在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰 ...

  9. 用 webpack 创建 vue 项目

    1.安装支持webpack 包 npm i -D  webpack webpack-cli  aspnet-webpack webpack-dev-middleware  webpack-hot-mi ...

随机推荐

  1. 证明二叉查找树所有节点的平均深度为O（logN）

    数据结构与算法分析(c语言描述)第4章 P78 概念一:一棵树所有节点的深度和称为内部路径长 令D(N)为一棵有N节点的树的内部路径长么,即有D(1)=0, 设一棵树的左子树的内部路径长为D(i),则 ...

  2. python 正则详解

    正则表达式概述 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的 ...

  3. API验证及AES加密

    API验证 API验证: a. 发令牌: 静态 PS: 隐患 key被别人获取 b. 动态令牌 PS: (问题越严重)用户生成的每个令牌被黑客获取到,都会破解 c. 高级版本 PS: 黑客网速快,会窃 ...

  4. django Form组件 上传文件

    上传文件 注意:FORM表单提交文件要有一个参数enctype="multipart/form-data" 普通上传: urls: url(r'^f1/',views.f1), u ...

  5. 南京邮电大学java程序设计作业在线编程第四次作业

    王利国的的 "Java语言程序设计第4次作业(2018)" 详细 主页 我的作业列表 作业结果详细 总分:100 选择题得分:40  1.下列方法定义中,正确的是() A.doub ...

  6. [翻译] TensorFlow Programmer's Guide之Frequently Asked Questions（问得频率最多的几个问题）

    目录: 特点和兼容性(Features and Compatibility) 建立一个TensorFlow图(Building a TensorFlow graph) 运行一个TensorFlow计算 ...

  7. super函数的作用

    super函数的作用super().__init__()当子类重写父类的方法时,会覆盖父类方法,super此举是保留父类 如果属性名跟方法名相同,属性会覆盖方法 方法必须要有实例才能被调用,这叫做绑定

  8. [LeetCode] Reverse Words in a String III 翻转字符串中的单词之三

    Given a string, you need to reverse the order of characters in each word within a sentence while sti ...

  9. 爱奇艺2018春招Java工程师编程题题解

    字典序最大子序列 题目描述 对于字符串a和b,如果移除字符串a中的一些字母(可以全部移除,也可以一个都不移除)就能够得到字符串b我们就称b是a的子序列. 例如."heo"是&quo ...

  10. codefroces 946F Fibonacci String Subsequences

    Description定义$F(x)$为$F(x−1)$与$F(x−2)$的连接(其中$F(0)="0"$,$F(1)="1"$)给出一个长度为$n$的$01$ ...