跳到主要内容

deveServer

devServer 通过webpack-dev-server依赖，为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能

开始​

一、安装依赖​

yarn add webpack-dev-server -D

二、package.json 命令行配置​

{
  "scripts": {
    "dev": "webpack serve --progress --color --config ./webpack.config.js",
  },
}

三、webpack.config.js 配置​

const Path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  devServer: {
    port: 8090,
    open: true,
  },
};

配置项​

devServer.ope​

devServer.ope 告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。

语法

devServer: {
  port: 8090,
  open: true,
}

devServer.port​

devServer.port 指定监听请求的端口号

语法

devServer: {
  port: 8090,
  open: true,
}

devServer.proxy​

devServer.proxy 当拥有单独的 API 后端开发服务器并且希望在同一域上发送 API 请求时，代理某些 URL 可能会很有用。

语法

devServer: {
  port: 8090,
  open: true,
  proxy: {
    "/index": {
      target: "http://localhost:3000",
      secure: false,
      changeOrigin: true,
      logger: console,
      pathRewrite: (path, req) => {
        console.log("调试 path", path);
        return path;
      },
    },
  },
}
  • target:
  • changeOrigin:
  • pathRewrite:

场景

  • 代理请求-拼接路径

    • webpack.config.js 配置 proxy

      devServer: {
        port: 8090,
        open: true,
        proxy: {
          "/index": {
            target: "http://localhost:3000",
            changeOrigin: true,
          },
        },
      }

    • 入口文件请求

      fetch('/index/test').then(res=> console.log(res))

  • 代理请求-重写路径

    • webpack.config.js 配置 proxy

      devServer: {
        port: 8090,
        open: true,
        proxy: {
          "/api": {
            target: "http://localhost:3000",
            changeOrigin: true,
            pathRewrite:(path,req)=>{
              const newPath = path.replace(/^\/api/,'')
              return newPath
            }
          },
        },
      }

    • 入口文件请求

      fetch('/api/index/test').then(res=> console.log(res))

devServer.compress​

devServer.compress 启用/禁用 gzip compression：

语法

devServer: {
  port: 8090,
  open: true,
  compress: true,
}

devServer.static.directory​

devServer.static.directory 告诉服务器从哪里提供内容。只有在你希望提供静态文件时才需要这样做。static.publicPath 将会被用来决定应该从哪里提供 bundle，并具有优先级。

语法

devServer: {
  port: 8090,
  open: true,
  static: {
    directory:Path.resolve(process.cwd(),'./public')
  },
}

效果: 浏览器访问 localhost:8090/ public 里面的静态文件 时，可以直接访问。

devServer.static.publicPath​

devServer.static.publicPath 告诉服务器在哪个 URL 上提供 static.directory 的内容。例如为在 /serve-public-path-url/manifest.json 中的 assets/manifest.json 提供服务

语法

devServer: {
  port: 8090,
  open: true,
  static: {
    publicPath:'/static',
    directory:Path.resolve(process.cwd(),'./public')
  },
}

效果: 浏览器访问 localhost:8090/static/ public 里面的静态文件 时，可以直接访问。

devServer.onBeforeSetupMiddleware​

devServer.onBeforeSetupMiddleware 提供在服务器内部执行所有其他中间件之前执行自定义中间件的能力。 这可以用来定义自定义处理程序

语法

devServer: {
  onBeforeSetupMiddleware: function (devServer) {
    if (!devServer) {
      throw new Error('webpack-dev-server is not defined');
    }

    devServer.app.get('/some/path', function (req, res) {
      res.json({ custom: 'response' });
    });
  },
}

场景

  • 通过onBeforeSetupMiddleware实现接口数据Mock

    • webpack.config.js 配置 onBeforeSetupMiddleware , 模拟接口

      onBeforeSetupMiddleware: ({ app }) => {
        app.get("/index/test", (req,res) => {
          res.send({
            code: 200,
            msg: "测试成功！",
          });
        });
      },

    • 入口文件调用接口

      fetch('/index/test').then(res=> console.log(res))