webpack-dev-server 本地mock数据

mock服务

const fs = require('fs');
const path = require('path')

const ASYNC_PREFIX = '/async/*'

function handerAsyncRequest (req, res) {
    let data = '';
    let reqPath = req.path;
    let reqQuery = req.query;
    let protocol = req.protocol;
    let method = reqQuery['method'];

    let pathStr = '';
    let fileUrl = '';
    if (method) {
        pathStr = method.replace(/\./ig, path.sep) + '.json'
    } else {
        pathStr = reqPath.replace(/\/async/ig, '') + '.json'
        
    }
    fileUrl = path.join(__dirname, '..', 'mock', 'data', pathStr)
    try {
        data = fs.readFileSync(fileUrl, {
            encoding: 'utf8'
        });
    } catch (e) {
        data = e;
    }
    res.send(data);
}

function beforeServer (app, server) {
    app.get(ASYNC_PREFIX, handerAsyncRequest)
    app.post(ASYNC_PREFIX, handerAsyncRequest)
}

module.exports = {
    beforeServer
};

• app.use(path, router/callback) 也可以实现, path不接受正则，会匹配以path开头的路径

webpack配置服务配置

devServer: {
    before: beforeServer
}

vue-loader.conf.js

transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
}

在模板编译过程中，编译器可以将某些特性转换为 require 调用，例如 src 中的 URL。因此这些目标资源可以被 webpack 处理。例如 <img src="./foo.png"> 会找到你文件系统中的 ./foo.png 并将其作为一个依赖包含在你的包里。

资源 URL 转换会遵循如下规则：

• 如果路径是绝对路径 (例如 /images/foo.png)，会原样保留。
• 如果路径以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
• 如果路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源
• 如果路径以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了

plugins

• directory-named-webpack-plugin 解决默认只使用index.js的问题，使用此插件可以解决a/a.js 引用问题