后台模拟接口代理webpack实现

Webpack使用后台代理开发入门

在项目根目录下面新建main.js文件，show.js文件，package.json文件，webpack.config.js,main.css文件文件

main.js文件内容如下：

//引入css模块
require('./main.css');
import axios from 'axios'
//引入js
const show = require('./show.js');
show('webpack');

//后台的接口
const URL = "/rest/plat/brmgr/v1/ui/baseinfo/products";
axios.get(URL).then(res => {
    console.log(res)
});

show.js文件代码如下

function show(content) {
    window.document.getElementById('app').innerHTML = 'Helloeee,' + content;
}

module.exports = show;

package.json文件代码如下

{
  "name": "webpack_Study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "D": "^1.0.1",
    "axios": "^0.19.2"
  }
}

main.css文件如下

#app{
    text-align: center;
}

webpack.config.js文件如下

const path = require('path');
const proxyInfo = require(`./proxy_config.json`);
// const proxyList = ['/febs', '/unisess', '/rest', '/s', '/fonts', '/plugins', '/plat', '/eviewwebsite', '/fmwebsite', '/adminconsolewebsite', '/engrcommonwebsite'];
const proxyList = ['/rest'];
//rest开头的接口使用环境上模拟的后台接口
module.exports = {
    // JS 执行入口文件
    entry: { main: './main.js', show: './show.js' },
    output: {
        // 把所有依赖的模块合并输出到一个 bundle.js 文件
        filename: '[name].js',
        // 输出文件都放到 dist 目录下
        path: path.resolve(__dirname, './dist'),
    },
    module: {
        rules: [
            {
                // 用正则去匹配要用该 loader 转换的 css 文件
                test: /.css$/,
                loaders: ['style-loader', 'css-loader'],
            }
        ]
    },
    devServer: { // DevServer 相关的配置
        proxy: { // 代理到后端服务接口
            context: proxyList,
            target: `http://127.0.0.1:${proxyInfo.port}/localproxy`,
            changeOrigin: true,
        },
    }
};

在项目根目录下面新建proxy_config.json，内容如下

{
    "port": 3333,
    "proxyConfig": [
        {
            "url": "https://9.2.23.67:31945/",
            "steps": [
                [
                    "input",
                    "#username",
                    "admin"
                ],
                [
                    "input",
                    "#value",
                    "***"
                ],
                [
                    "click",
                    "#submitDataverify"
                ]
            ],
            "title": "用户登陆"
        }
    ],
    "ignoreUrls": [
        "/smapp/v1/settings/loginmode",
        "/rest/adminhome/website/v1/sitecustom"
    ]
}