webpack4.0(二)：webpackDevServer

在开发中我们还需要一个本地文件的服务器，并且当我们保存代码的时候会自动进行打包，并且还支持 Source Map，以方便代码调试等功能，因此我们现在需要使用到 devServer了。

webpack-dev-server

首先我们需要安装：webpack-dev-server:

全局安装：
npm install -g webpack-dev-server
局部安装：
npm install --save-dev webpack-dev-server

在webpack4之后，同时需要安装：webpack-cli

npm install webpack-cli -D

最后我们运行webpack-dev-server，就可以启动一个本地服务器，默认端口号是8080，访问http://localhost:8080/即可。

注意：使用webpack-dev-server打包的文件保存在电脑内存当中，可以提高访问速度。

当然，这个默认的配置是可以修改的，在webpack.config.js中：

devServer:{
    contentBase: './dist',//指定服务器默认打开的文件夹
  open: true,//是否自动打开浏览器窗口
  port: "8081"//配置端口号
}

watch

实时预览。使用webpack --watch，监听文件系统的变化，实现自动打包。当项目的入口文件或者依赖文件发生变动时，它会重新构建，构建完成之后会刷新页面。但是如果修改的不是入口文件或者依赖文件，它是不会重新构建的。

webpack-dev-middleware

新建一个服务端，并且将webpack处理过的文件传送给服务器。
原理：使用webpack和其对应的配置文件，生成一个编译器，使用该中间件，在服务器上监听文件变化，重新打包。
使用express建立本地服务器：

//server.js
const express = require('express');
const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config);//编译器
const app = express();

app.use(middleware(complier, {
    publicPath: config.output.publicPath
}))

app.listen(3000)

然后访问3000端口即可。

HMR

除了以上方法可以实现在入口文件或者依赖文件发生变动时进行重新打包加载页面之外，使用模块热替换技术也可以实现在不刷新页面的情况下，使用已更新的模块替换旧模块。
模块热替换技术默认是不开启的，我们可以通过以下方法开启：

1. 在启动devServer的时候带上--inline 或者 --inline hot即可。
2. 在devServer中配置：

devServer: {
  contentBase: './dist',
  open: true,
  port: 8080,
  hot: true, //配置HMR 阻止浏览器自动刷新
  hotOnly: true, //即便HMR不生效 也不让浏览器自动刷新
},
 plugins: [
    new webpack.HotModuleReplacementPlugin()
]

proxy

dev-server使用了非常强大的包：http-proxy-middleware，具体用法请查看使用文档。
举个🌰：如果在http://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: "http://localhost:3000",
      pathRewrite: {"^/api" : ""},
      secure: false
    }
  }
}

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。
例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

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";
      }
    }
  }
}

如果想要代理多个目标路径大同一目标呢服务器上，则可以使用数组或者多个对象的形式：

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

//或者

proxy: {
  "/api":{
      "target":"http://localhost:3000/"
  },
  "/auth":{
      "target":"http://localhost:4000/"
  }
}