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 引用問題