一、创建项目目录

二、添加开发依赖( 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. WebStorm2018破解

    参考网站http://www.sdbeta.com/wg/2018/0302/220048.html修改整理如下: webstorm 2018.1正式版破解summary jetbrainscrack ...

  2. SSM登陆注册

    package com.coingod.controller; import java.io.IOException;import java.io.PrintWriter;import java.ut ...

  3. centos6.5时间相关

    时间同步 service ntpdate start 开启网络时间同步

  4. datatables

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. requests post一个json数据

    # post一个json数据 import requests headers={ "Accept":"application/json, text/plain, */*& ...

  6. NGUI----简单聊天系统一

    1:聊天背景的创建 新建一个场景-----保存场景 NGUI---->Create-----Panel 选中UIRoot,然后新建一个sprite 选择图集 效果如下图 添加一个可拖拽的功能 选 ...

  7. java中lamda表达式的应用

    lamda表达式主要是为了解决匿名内部类的繁琐过程 范例:简单的lamda表达式 此处使用匿名内部类 package com.java.demo; interface IMessage{ public ...

  8. Python系列之 - 字符编码问题

    1.内存和硬盘都是用来存储的. CPU:速度快 硬盘:永久保存 2.文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就可以启动一个进程,是在内存中的,所以在编辑器编 ...

  9. XML 解析默认去掉命名空间和注释

    //创建xml文档 XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(@"C:\Users\Tony\Downloads\统一标准报文格 ...

  10. [IOI 2011]ricehub

    Description 乡间有一条笔直而长的路称为“米道”.沿着这条米道上 R 块稻田,每块稻田的坐标均为一个 1 到 L 之间(含 1 和 L)的整数.这些稻田按照坐标以不减的顺序给出,即对于 0 ...