本地开发时使用webpack-dev-server 快速搭建静态服务器并代理请求（附源码）

有的时候会有这样的需求，需要开发几个静态页面（可能是后面要整合到jsp，可能是考虑seo，也可能是统一之前项目的代码风格等等因素）,最终是用jquery或者js开发的，而不是vue、react。这种情况下又因为前后端是分离的，直接调接口将会出现跨域问题。

解决办法1：使用webpack-dev-server 快速搭建静态服务器，并配置proxy代理

package.json代码如下：

{
  "name": "devserve",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --progress --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

webpack.config.js代码如下

const path = require('path');
// 开发环境调试地址
const targetUrl = {
    testUrl: 'https://localhost:11000/' // 改为自己的后端地址
}

module.exports = {
    entry: './app.js', // 必须有入口文件
    mode: 'development',
    resolve: {
        extensions: ['.js', '.json', '.wasm'],
    },
    devServer: {
        https: true, // 是否开启https
        static: {
            directory: path.join(__dirname, '../www'), // 静态本地服务
        },
        compress: true, // 启用 gzip compression： 如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用
        host: 'localhost',
        port: 9000,
        hot:true,
        open: false,
        proxy: {
            '/api': {
                target: targetUrl.testUrl,
                changeOrigin: true,
                pathRewrite: { '^/api': '' },
            },
        },
    },
};

因为我这边接口是调的https的，因此开启了https配置，如果要使用http的，将https改为false即可
app.js这个里面没有内容，只是让webpack编译不报错而已，因为webpack需要一个入口文件

// 入口文件

代码目录结构如下图：

image.png

最后在devServe目录下执行：

// 1.安装依赖
npm i
// 2.开启服务 
npm run dev

最后浏览器访问即可：https://localhost:9000/

解决办法2：使用nginx代理请求到后端

这个方法大概说下思路
1.开启静态服务。可以用npm的serve模块也可以用express或者iis等等，或者直接使用webstorm直接打开index.html，当然使用nginx也可以开启静态服务器
2.然后就是代理接口了，这个使用nginx代理刚刚的地址即可

....
       location /api/ {
           proxy_pass https://localhost:11000/;
       }
....