一、创建项目目录

二、添加开发依赖( 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. find文件查找

    一.locate locate基于数据库索引来查找文件,数据库在开机时一段时间对更新,不会实时更新,数据库存放在(/var/lib/mlocate/mlocate.db),可以用updatedb来手动 ...

  2. 1.6 dropout正则化

    除了L2正则化,还有一个非常实用的正则化方法----dropout(随机失活),下面介绍其工作原理. 假设你在训练下图左边的这样的神经网络,它存在过拟合情况,这就是dropout所要处理的.我们复制这 ...

  3. sys.exc_info()可以捕获到任意异常

    import sys try: a = 3 assert a > 4 except: exc = sys.exc_info()#返回异常的元祖 print (exc)

  4. Array方面Js底层代码学习记录

    一..clear() →Array function clear() { this.length = 0; return this; } 返回清除item的空数组. 例子: var fruits = ...

  5. Qt 的一些浅知识点

    1 Qt 官网下载地址 http://download.qt.io/ 2 必须得有pro文件么 不是必须的. pro 文件是个中间文件,通过 qmake 程序能将 pro 文件转换成其它平台的项目文件 ...

  6. requests之一：HTTP OAUTH认证（1）图形解释流程

  7. nginx 安装及简单配置（适用 小白）

    一.nginxNginx是一个异步框架的 Web服务器,也可以用作反向代理,负载平衡器 和 HTTP缓存,Nginx可以部署在网络上使用FastCGI脚本.SCGI处理程序.WSGI应用服务器或Phu ...

  8. 将 Net 项目升级 Core项目经验：（三）迁移后的Net Standard版本的类库测试和多平台项目实测

    迁移后的Net Standard版本的类库测试和多平台项目实测 按照第一步的方法,添加一个Net Core的MSTest项目,然后将原来的测试项目下的代码迁移到新测试 项目中,然后引用新的Beyond ...

  9. 是否有必要学习使用纯Verilog写一个SDRAM控制器

    在做这个SDRAM控制器之前,博主有一个疑问,对于学生来说,是否有必要学习用纯Verilog写一个SDRAM控制器?因为目前X家和A家都有了DDR IP Core,对于要实现一个应用可以直接调用IP ...

  10. Spring--bean的作用范围

    在Spring中,bean的作用范围分以下几种: singleton:spring ioc容器中仅有一个bean实例,bean以单例的方式存在 prototype:每次从容器中调用bean时,都返回一 ...