webpack-devServer的详细配置

目录结构：

  // 开发服务器环境
  devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, "build"),
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  },

1>  host域名的配置

host: "127.0.0.1",

2> compress启动压缩

配置compress进行服务启动压缩，开启gzip的压缩，开启 gzip之后，内容是原来的21%体积

  compress: true

3> watchContentBase监听目录

告诉 dev-server 监听选项提供的文件。 默认情况下禁用。 启用后，文件更改将触发整个页面重新加载

 watchContentBase: true,

4>  watchOptions监听配置

 watchOptions: {
    // 忽略监听的文件内容
    ignored: /node_modules/
  }

5> clientLogLevel客户端日志

可能会导致日志过于冗余，可以通过将其设置为 'silent' 来关闭日志

 // 客户端信息的配置
  clientLogLevel: "silent"

6>  stats编辑器信息管理

如果需要一些捆绑软件信息，但又不是全部，这可能是一个很好的中间立场。

可能的配置'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose' object

比如值抛出错误信息

 stats: 'errors-only',

7>  quiet的静谧状态

除了显示初始信息之外，什么都不会写入编辑器控制台。 这也意味着来自webpack的错误或警告是不可见的。

 quiet :true

8> proxy的代理

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

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

 devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },

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

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

 devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
  },

默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器。 如果需要，可以这样修改配置：

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

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

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

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

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 属性的对象的数组：

 devServer: {
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },

默认情况下不会代理对 root 的请求。 要启用根代理，应将 devMiddleware.index 选项指定为虚假值：

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

代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为:

 devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },