webpack-dev-server搭建简易mock服务器

2021-05-25

字数统计: 1.2k字 | 阅读时长≈ 5分钟

webpack-dev-server

用来快速开发应用，仅用于development环境

webpack-dev-server是第三方依赖库，依赖webpack-dev-middleware（负责把webpack打包后的文件存放在内存中供外界访问）。

下载：

1	npm install -D webpack-dev-server --registry https://registry.npm.taobao.org

devServer

对象，webpack的一个配置选项，主要为webpack-dev-server的参数

const path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true, // 该选项为 true，如果访问服务器的文件，将压缩 dist 目录底下的所有文件给到访问者
    port: 8888,
  },
};

属性

host: 指定一个host，默认为localhost

1
2
3

devServer: {
    host: '0.0.0.0',
},

port: 设置服务器的端口，默认为8080
allowedHost: 字符串数组，用于添加白名单，允许开发服务器访问

devServer: {
    host: "0.0.0.0", // 如果你希望服务器外部可访问
    allowedHosts: [
        "www.baidu.com" // 添加白名单
    ]
}

disableHostCheck: 是否关闭白名单校验，默认为false，此项设为true则不需要设置allowedHost
before: function，在服务其他中间件之前，提供执行自定义中间件的功能，可以用来配置自定义处理程序
after: function，用法与before一致，表示在服务其他中间件之后执行自定义中间件的功能
compress: 默认为false，用于对服务器的文件和处理结果的压缩
contentBase: 默认为process.cwd()，express的功能，利用express指定某目录为静态目录
contentBasePublicPath: 表示静态公共目录的访问path
historyApiFallback: 当后端路由没有命中，就会自动重定向到index.html
hot: 默认为false，启用webpack的模块热替换功能
- hot reload: 热载入，需要打开hot生效，即当webpack监听到文件变化，打包编译后通知webpack-dev-server,客户端收到webpack-dev-server消息后更新局部模块。
- live load: 实时更新，webpack-dev-server默认开启，即客户端刷新整个页面。
open: 字符串或对象，默认false禁用。告诉dev-server在server启动后打开浏览器
overlay: boolean或对象形式，默认为false。将webpack报错信息显示到浏览器

devServer: {
    ...
    overlay: true, // 把 webpack 的报错和警告信息显示在浏览器
}

//或分开显示error和warning
overlay: {
  warnings: true, // 是否显示 warnings
  errors: true // 是否显示 errors
}

搭建mock服务器

新建mock目录
编写mock接口函数

module.exports = function (req,res,next){
    const { name } = req.query; //接受参数name  
    let result = `${name}，请回应我～`; //返回result
    res.json({ msg: result }); //json格式返回result
}

修改webpack.config.js文件用webpack-dev-server加载此函数

devServer: {
        disableHostCheck: true, //关闭白名单校验
        before(app, devServer, compiler){
            const glob = require("glob");
            const mockPaths = `${path.join(__dirname,'./mock')}/*.js`;//获取所有mock函数
            glob(mockPaths,function(er,files){
                files.forEach((mockFile) => {// 遍历所有mock函数
                    const mockFunc = require(mockFile); // 获取当前mock函数
                    const methodName = path.basename(mockFile).split(".")[0];//获取当前mock名称
                    app.all("/" + methodName, mockFunc); // 添加mock函数到服务器
                });
            });
        },
    },

使用命令npx webpack-dev-server启动，访问链接http://localhost:8080/responseByName?name=lynn查看效果

mock回应

编写对接接口并处理返回值渲染页面

//入口文件src/index.js
import {webpackSay} from "../library"; //引入 library 的 webpackSay 方法
import Vue from "vue"; //导入vue
import noticeWebpack from "$NOTICE"; //导入noticeWebpack组件

document.write("hello webpack!");
//按需引入demo.js文件
import("./demo").then((result) => {
    result.default();
    webpackSay(); //执行 webpackSay方法
    // 通知webpack函数
    function renderNotice(){
        const noticeRootEle = document.createElement("div");
        document.body.append(noticeRootEle);
        new Vue({
            render: (h) => h(noticeWebpack)
        }).$mount(noticeRootEle);
    }
    renderNotice();
    // mock服务器对接接口，渲染页面
    responseMsg('Lynn').then((msg) => {
        writeToPage(`喂喂喂： ${msg}`);
    }).catch((e) =>{
        writeToPage('喂喂喂，听不到我嘛～');
    });
});

/** 
 * 对话函数
 * @param name
 */
function responseMsg(name){
    return new Promise((resolve,reject) =>{
        const request = new XMLHttpRequest();
        request.onreadystatechange = () => {
            if(request.readyState === 4 && request.status === 200){
                const result = JSON.parse(request.responseText);
                resolve(result.msg);
            }
        };
        request.onerror = (error) => {
            reject(error);
        };
        request.open('GET',`/responseByName?name=${name}`);
        request.setRequestHeader('accept', 'application/json'); // 添加请求头 accept 为 application/json
        request.send(null);
    });
}

/** 
 * 打印msg到页面
 * @param msg
 */
function writeToPage(msg){
    const ele = document.createElement('div');
    ele.innerText = msg;
    document.body.append(ele);
}

使用命令npx webpack-dev-server启动，查看效果

mock效果

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！