一、创建项目目录

二、添加开发依赖( 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. Python 中格式化字符串 % 和 format 两种方法之间的区别

    Python2.6引入了 format 格式化字符串的方法,现在格式化字符串有两种方法,就是 % 和 format ,具体这两种方法有什么区别呢?请看以下解析. # 定义一个坐标值 c = (250, ...

  2. golang-在gin中cookie跨域设置(配合ajax)

    1.当我在golang中,在前后端分离的情况下使用cookies时发现,跨域没有被允许.代码如下: func AccessJsMiddleware() gin.HandlerFunc { return ...

  3. JavaScript 以及 css3进度条

    JavaScript css3进度条 使用css3实现进度条 <!DOCTYPE html> <html lang="en"> <head> & ...

  4. Select下拉列表选择自动提交form表单数据

    HTML代码: <form action='__CONTROLLER__/index' method="get" id="myform"> < ...

  5. C#多线程+委托+匿名方法+Lambda表达式

    线程 下面是百度写的: 定义英文:Thread每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.进程也可能是整个程序或者是部分程序的动态执行.线程是一组指令的集合,或者是程序的特殊段,它 ...

  6. SQL Server 2008 R2 安装注意事项

    上个星期自己第一次安装SQL Server 2008 R2,安装失败几次,结果用了将近1天的时间安装,最后成功了. 心得:1.安装SQL Server 2008 R2时,最好在第一次就安装成功.在百度 ...

  7. Unity中的基础光照

    渲染包含了两大部分:决定一个像素的可见性,决定这个像素上的光照计算. 光照模型就是用于决定在一个像素上进行怎样的光照计算. 一.光源 在实时渲染中我们通常把光源当做一个没有体积的点. 1.1 辐照度 ...

  8. window.location各属性含义

    window.location方法获取URL   统一资源定位符 (Uniform Resource Locator, URL)   完整的URL由这几个部分构成:   scheme://host:p ...

  9. （hdu-4280）Island Transport~测试网络流模板速度~要加挂才能过啊

    Problem Description In the vast waters far far away, there are many islands. People are living on th ...

  10. Maven 项目管理工具基础知识系列（一）

    一.Maven 简介 Maven 中文意为 " 内行.专家 ",是 Apache 下的一个开源项目,属于纯 Java 开发,并且只是用来管理 Java项目的,它是一款项目管理工具, ...