1️⃣ webpack-dev-server 版本

npm i -D webpack-dev-server

  1. webpack-dev-server 有兼容性 webpack-dev-serve 只兼容 **webpack4** 和 **webpack-cli3 **以下版本是兼容的

  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
// package.json
  "scripts": {
    "server": "webpack-dev-server"
  },

1️⃣ 当我们执行webpack-dev-server命令后，它做了以下操作

内部执行 webpack 命令，传递命令参数
开启 watch
注册 hooks：类似于 plugin，webpack-dev-server 会向 webpack 中注册一些钩子函数，主要功能如下：

  1. 将资源列表（aseets）保存起来
  2. 禁止 webpack 输出文件

用 express 开启一个服务器，监听某个端口，当请求到达后，根据请求的路径，给予相应的资源内容

1️⃣ webpack-dev-server 配置

module.exports = {
  devServer: {
    port: 9000, // 配置默认端口
    open: true, // 自动打开浏览器 ( 自动打开默认浏览器 )
    compress: true, // 启动gzip压缩
    index: "index.html", // 默认的要打开的 html 文件
    proxy: {
      '/api': {
        // 当请求 http://localhost:9000/api/xxx 的地址时会更改为 http://www.baidu.com/api/xxx
        // 将 /api 之前的协议域名端口号更改为 target 的协议域名端口号
        target: 'http://www.baidu.com',
        // 如果不希望 /api 包含其中可以做如下配置结果为:　http://www.baidu.com/api/xxx　( 将 /api 替换为 '' )
        pathRewrite: { '^/api': '' }
      }
    },
    stats: { // stats 控制的是构建过程中控制台的输出内容 
      // 对于 webpack-dev-server，这个属性要放在 devServer 对象里。
      // devServer 的 starts 配置同总体的 starts 设置相同
    }
  }
}