9. 重学webpack——webpack-dev-server使用详解

推荐：《webpack学完这些就够了》

《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。

以下是本节正文：

webpack-dev-server使用详解

webpack-dev-server是开发服务器的配置，本质是启动了一个express服务器

下面，看一下常用的配置项及其作用：

• publicPath: 详解可以参照《2. 重学webpack——webpack5.0之深入了解output的publicPath、htmlWebpackPlugin的publicPath和devServer的publicPath区别_俞华的博客-CSDN博客》
• contentBase：额外的静态文件目录内容，所谓的额外的，就是指不会被打包进去的，但是我可以将contentBase作为静态服务器资源目录，其实就相当于景台服务器，浏览器可以直接访问对应目录下的文件。另外，如果找不到dist下（内存中）的静态文件，就会去这个目录下找。
• port：服务器监听的端口
• open：布尔值，是否编译完后自动打开浏览器提供访问，还可以是对象等，用于指定打开哪个浏览器，一般不常用，会有问题
• openPage：当open为true的时候，指定自动打开的页面，如果写了’a.txt’，则打开的就是域名/a.txt，仅在open为true下有效
• compress：是否为每个静态文件启动gzip压缩 也可以使用命令：npx webpack serve --compress
  • 特别注意：
    • compress开启gzip怎么查看？去看响应头返回的Content-Encoding: gzip，是响应头，不是请求头！！！
    • compress为true后，是这样请求的：请求头会有一个Accept-encoding:gzip（有这个头并不意味着是gzip，关键看响应头），发送到服务器，服务器找到请求的资源，然后压缩，发送给浏览器，浏览器的响应头会有一个Content-Encoding: gzip（这标志是已经进行了gzip压缩），然后浏览器会对这个zip压缩文件进行解压，展示给用户。
    • devServer对于过小的文件，不会开启gzip，即便compress为true，我猜是做了判断，对于gzip压缩后比本身还大的文件，依旧返回本身。
• lazy：lazy模式 webpack 将不会监视任何文件更改，只有等到接收到请求的时候才会编译捆绑软件，所谓的捆绑软件就是devServer.filename的值所对应的软件。
• filename：lazy模式下必须设置filename
• after/before函数：在 webpack-dev-server 静态资源中间件处理之后/前，可以用于拦截部分请求返回特定内容，或者实现简单的数据 mock。
• host：可以让别人访问当前服务，但是如果这边编译，那边也会同步更新
• hot：是否热更新，配合webpack.HotModuleReplacementPlugin使用
• headers：配置响应头，注意，这是配置响应头，不是请求头
• proxy：代理，下面会详细讲。

devServer: {
    publicPath: '/', // 如果值是/yuhua/，那么服务会起在/yuhua/下，比如不写这个publicPath的时候，访问是http://localhost:8080/,那么写了之后就是http://localhost:8080/yuhua就能访问到首页，以及dist打包出来的资源都以后者为路径前缀
    contentBase: path.resolve(__dirname, 'public'), // 额外的静态文件目录内容，所谓的额外的，就是指不会被打包进去的，但是我可以将contentBase作为静态服务器资源目录，其实就相当于景台服务器，浏览器可以直接访问对应目录下的文件。另外，如果找不到dist下（内存中）的静态文件，就会去这个目录下找。
    port: 6688, // 服务器监听的端口
    open: true, // 是否打开浏览器提供访问
    // open: {
    //   app: ['Google Chrome', '--incognito'],
    // },
    // openPage: 'test.txt',
    compress: true, // 是否为每个静态文件启动gzip压缩 也可以使用命令：npx webpack serve --compress
    /*
      特别注意：
      1. compress开启gzip怎么查看？去看响应头返回的Content-Encoding: gzip，是响应头，不是请求头！！！
      2. compress为true后，是这样请求的：请求头会有一个Accept-encoding:gzip（有这个头并不意味着是gzip，关键看响应头），发送到服务器，服务器找到请求的资源，然后压缩，发送给浏览器，
      浏览器的响应头会有一个Content-Encoding: gzip（这标志是已经进行了gzip压缩），然后浏览器会对这个zip压缩文件进行解压，展示给用户。
      3. devServer对于过小的文件，不会开启gzip，即便compress为true，我猜是做了判断，对于gzip压缩后比本身还大的文件，依旧返回本身。（？？？？？？？？？？？？？？？？）
    */
    // lazy: true, // lazy模式 webpack 将不会监视任何文件更改，只有等到接收到请求的时候才会编译捆绑软件，所谓的捆绑软件就是devServer.filename的值所对应的软件。
    // filename: 'bundle.js', // lazy模式下必须设置filename
    after: function (app, server, compiler) {
      console.log('提供自定义中间件，当 devServer 服务器内部的 所有中间件执行完成之后执行')
    },
    // before 在 webpack-dev-server 静态资源中间件处理之前，可以用于拦截部分请求返回特定内容，或者实现简单的数据 mock。
    before: function (app, server, compiler) {
      console.log('提供自定义中间件，当 devServer 服务器内部的 所有中间件执行完成之后执行, 一般用于模拟后端路由,比如模拟登陆')
      // app.get('/', function (req, res) {
      //   res.json({ custom: 'response' });
      // });
      app.get('/yuhua', function (req, res) {
        res.json({ custom: 'yuhua' });
      });
    },
    host: "10.19.127.27", // 可以让别人访问当前服务，但是如果这边编译，那边也会同步更新
    hot: false, // 需要配合webpack.HotModuleReplacementPlugin使用
    // headers: {
    //   'X-Custom-Foo': 'bar',
    // },
    // 使用一：将前端符合领的请求代理到后端服务器上
    proxy: {
      '/getName': 'http://localhost:3000', // 相当于前端的请求/getName的时候，会代理到后端服务http://localhost:3000上
      '/': 'http://localhost:3000'
    },
    // 使用二：多个路径代理到同一个target下
    proxy: [{
        context: ['/getName', '/getAge'],
        target: 'http://localhost:3000',
    }],
    // 使用三：如果你不想始终传递 /api ，则需要重写路径：所谓的重写路径，举个下面的例子：那么后端能够拿到的就是/yuhua，而不是/getName/yuhua，因为/getName被重写成了''
    proxy: {
      '/getName/yuhua': {
          target: 'http://localhost:3000',
          pathRewrite: {'^/getName' : ''}
      }
    },
    // 使用四：需要支持https。默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。
    proxy: {
        '/getName': {
            target: 'https://other-server.example.com',
            secure: false
        }
    },
    // 使用五：选择性代理，可以基于一个函数的返回值绕过代理。在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或 路径 ，来跳过代理请求。
    proxy: {
      '/getName': {
          target: 'http://localhost:3000',
          bypass: function(req, res, proxyOptions) {
              if (req.headers.accept.indexOf('html') !== -1) {
                  console.log('Skipping proxy for browser request.');
                  return '/src/index.html';
              }
          }
      }
    },
    // 使用六：changeOrigin参数, 是一个布尔值, 设置为true, 比如是下面的配置，那么changeOrigin为true，将主机标头的原点更改为目标URL, 也就是本地会虚拟一个服务器，接收到你的请求，然后将请求转发给target，这里特别注意，由于设置changeOrigin为true，那么服务端接收到的请求的headers中，host为target
    proxy: {
      '/getName': {
          target: 'http://localhost:3000',
          changeOrigin: true,
      }
    }
  },

proxy代理的使用：

使用一：将前端符合领的请求代理到后端服务器上

proxy: {
    '/getName': 'http://localhost:3000', // 相当于前端的请求/getName的时候，会代理到后端服务http://localhost:3000上
        '/': 'http://localhost:3000'
},

使用二：多个路径代理到同一个target下

proxy: [{
    context: ['/getName', '/getAge'],
    target: 'http://localhost:3000',
}],

使用三：如果你不想始终传递 /api ，则需要重写路径：所谓的重写路径，举个下面的例子：那么后端能够拿到的就是/yuhua，而不是/getName/yuhua，因为/getName被重写成了’’

proxy: {
    '/getName/yuhua': {
        target: 'http://localhost:3000',
            pathRewrite: {'^/getName' : ''}
    }
},

使用四：需要支持https。默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。

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

使用五：选择性代理，可以基于一个函数的返回值绕过代理。在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或 路径 ，来跳过代理请求。

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

使用六：changeOrigin参数, 是一个布尔值, 设置为true, 比如是下面的配置，那么changeOrigin为true，将主机标头的原点更改为目标URL, 也就是本地会虚拟一个服务器，接收到你的请求，然后将请求转发给target，这里特别注意，由于设置changeOrigin为true，那么服务端接收到的请求的headers中，host为target

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