一、创建项目目录

二、添加开发依赖( 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. Linux探索之路1---CentOS入坑笔记整理

    前言 上次跟运维去行方安装行内环境,发现linux命令还是不是很熟练.特别是用户权限分配以及vi下的快捷操作.于是决定在本地安装一个CentOS虚拟机,后面有时间就每天学习一点Linux常用命令. 作 ...

  2. 前端之JavaScript内容

    一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnv软件中),后将其改名ScriptEas ...

  3. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

  4. cache和buffer

    一.free命令是Linux查看内存使用情况的命令 1. centos 7风格 [root@bogon init.d]# free -m total used free shared buff/cac ...

  5. vi和vim编辑器

    VI vi是一种计算机文本编辑器,由美国计算机科学家比尔·乔伊(Bill Joy)完成编写,并于1976年以BSD协议授权发布. VIM Vim是从vi发展出来的一个文本编辑器.其代码补完.编译及错误 ...

  6. Paper藐小之处明察秋毫故时有物外之趣

    暂且针对第一篇叶脉提取的paper 插入图像的"图 N": 英 Times New Roman, 中 宋体, 10磅. 文末的引文: 两端对齐. 流程图框格内文字换行时, 忌: 将 ...

  7. Apache Spark Jobs 性能调优

    当你开始编写 Apache Spark 代码或者浏览公开的 API 的时候,你会遇到各种各样术语,比如transformation,action,RDD(resilient distributed d ...

  8. [LeetCode] Erect the Fence 竖立栅栏

    There are some trees, where each tree is represented by (x,y) coordinate in a two-dimensional garden ...

  9. 用C# (.NET Core) 实现迭代器设计模式

    本文的概念来自深入浅出设计模式一书 项目需求 有两个饭店合并了, 它们各自有自己的菜单. 饭店合并之后要保留这两份菜单. 这两个菜单是这样的: 菜单项MenuItem的代码是这样的: 最初我们是这样设 ...

  10. codevs3990：中国剩余定理2

    好久没做codevs啦 #include<cstdio> #include<cstdlib> #include<algorithm> #include<cst ...