0


Webpack--devServer的常用配置

原文网址:Webpack--devServer的常用配置_IT利刃出鞘的博客-CSDN博客

简介

说明

    本文介绍webpack的devServer常用的一些配置。

配置格式

配置文件为:webpack.config.js(如果是vue-cli,配置文件为vue.config.js)

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

client

overlay

类型

boolean = true object: { errors boolean = true, warnings boolean = true }

作用

覆盖屏幕。

示例:当出现编译错误或警告时,在浏览器中显示全屏覆盖。

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: true,
    },
  },
};

通过命令行使用:

npx webpack serve --client-overlay

如需禁用:

npx webpack serve --no-client-overlay

示例:只显示错误信息

webpack.config.js

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },
};

通过命令行使用:

npx webpack serve --client-overlay-errors --no-client-overlay-warnings

open

类型

boolean string object [string, object]

作用

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

open 所有配置项

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      target: ['first.html', 'http://localhost:8080/second.html'],
      app: {
        name: 'google-chrome',
        arguments: ['--incognito', '--new-window'],
      },
    },
  },
};

示例:启动后打开浏览器

webpack.config.js

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

通过命令行使用:

npx webpack serve --open

如需禁用:

npx webpack serve --no-open

示例:在浏览器中打开指定页面

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page'],
  },
};

通过命令行使用:

npx webpack serve --open /my-page

示例:在浏览器中打开多个指定页面

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: ['/my-page', '/another-page'],
  },
};

通过命令行使用:

npx webpack serve --open /my-page --open /another-page

示例:提供要使用的浏览器名称,而不是默认名称

webpack.config.js

module.exports = {
  //...
  devServer: {
    open: {
      app: {
        name: 'google-chrome',
      },
    },
  },
};

通过命令行使用:

npx webpack serve --open-app-name 'google-chrome'
    浏览器应用程序名称与平台相关。不要在可重用模块中硬编码它。例如,'Chrome' 在 macOS 是 'Google Chrome',在 Linux 是 'google-chrome',在 Windows 是 'chrome'。

port

类型

'auto' string number

作用

指定监听请求的端口号。

示例:指定监听请求的端口号

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};

通过命令行使用:

npx webpack serve --port 8080

示例:自动使用可用的端口

port 配置项不能设置为 null 或者空字符串,要想自动使用一个可用端口请使用 port: 'auto':

webpack.config.js

module.exports = {
  //...
  devServer: {
    port: 'auto',
  },
};

通过 CLI 使用:

npx webpack serve --port auto

proxy

类型

object [object, function]

作用

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

    开发服务器使用功能强大的 http-proxy-middleware 软件包。 查看其 documentation 了解更多高级用法。 请注意,http-proxy-middleware 的某些功能不需要target键,例如 它的 router 功能,但是仍然需要在此处的配置中包含target,否则webpack-dev-server 不会将其传递给 http-proxy-middleware。

示例:指定后端地址

使用后端在 localhost:3000 上,可以使用它来启用代理:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

现在,对 /api/users 的请求会将请求代理到 http://localhost:3000/api/users。

示例:重写路径

如果不希望传递/api,则需要重写路径:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

示例:支持https的后端服务器

    默认不支持使用无效证书的HTTPS的后端服务器。 如果需要,可以这样修改配置:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false,
      },
    },
  },
};

示例:代理部分内容

有时不想代理所有内容。 可以基于函数的返回值绕过代理。

在该功能中,可以访问请求,响应和代理选项。

  1. 返回 null 或 undefined 以继续使用代理处理请求。
  2. 返回 false 会为请求产生 404 错误。
  3. 返回提供服务的路径,而不是继续代理请求。

例如,对于浏览器请求,想要提供 HTML 页面服务,但是代理 API 请求。 可以执行以下操作:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        bypass: function (req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.');
            return '/index.html';
          }
        },
      },
    },
  },
};

示例:将多个路径代理到同一目标

    如果想将多个特定路径代理到同一目标,则可以使用一个或多个带有 context 属性的对象的数组:

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

示例:代理对root的请求

默认不会代理对 root 的请求。 要启用根代理,应将 devMiddleware.index 选项指定为false:

webpack.config.js

module.exports = {
  //...
  devServer: {
    devMiddleware: {
      index: false, // specify to enable root proxying
    },
    proxy: {
      context: () => true,
      target: 'http://localhost:1234',
    },
  },
};

示例:不保留主机头的来源

    默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 以覆盖此行为。 在某些情况下,例如使用 name-based virtual hosted sites,它很有用。

webpack.config.js

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

本文转载自: https://blog.csdn.net/feiying0canglang/article/details/126560143
版权归原作者 IT利刃出鞘 所有, 如有侵权,请联系我们删除。

“Webpack--devServer的常用配置”的评论:

还没有评论