> For the complete documentation index, see [llms.txt](https://azr.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azr.gitbook.io/webpack/pei-zhi/pei-zhi-devserver.md).

# 配置DevServer

前面我们只是简单的让`webpack`可以简单的运行起来，在实际的项目中，需要：

* 支持`HTTP`，而不是`file`。
* 监听文件的变化，自动刷新，可以做到实时预览页面。
* 支持`Source Map`，网代码更为方便的调试。

### 简单使用

#### 安装

需要全局安装`webpack-dev-server`

```javascript
$ npm i -g webpack-dev-server
```

在进行本地的安装`webpack-dev-server`

```javascript
$ npm i webpack-dev-server -D
```

执行命令`webpack-dev-server` ，会显示

```javascript
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
⚠ ｢wdm｣: Hash: 1276dc831679ecdee331
```

> 因为使用的webpack|v4.x，后面需要添加`--mode=development`

这就意味着`DevServer`在在监听`localhost:8080/`的端口，服务器会一直在后台持续运行，访问的是该目录下的`index.html`

> DevServer 会把 Webpack 构建出的文件保存在内存中，在要访问输出的文件时，必须通过 HTTP 服务访问。 

### devServer.host

`DevServer.host`配置项用于配置`DevServer`  服务器的监听地址，只能通过命令行进行参数的配置。默认是127.0.0.1。

```javascript
$ webpack-dev-server --host 0.0.0.0
```

### devServer.port

`DevServer`默认开启的***8080*** 端口，我们可以通过修改配置文件，来进行端口的修改。

```javascript
module.exports = {
    // ......
    devServer: {
      port: 7777
    },
    module: {/*....*/}
};
```

打开`http://localhost:9000/`   就可以看到网页了。

### �devServer.historyApiFallback

当404 自动跳转回首页

```javascript
module.exports = {
    // ......
    devServer: {
      port: 7777,
      historyApiFallback: true,
    },
    module: {/*....*/}
};
```

### devServer.noInfo

让命令中少一些输出

```
module.exports = {
    // ......
    devServer: {
      port: 7777,
      noInfo: true,
    },
    module: {/*....*/}
};
```

### 实时预览

试着修改文件`entry.js, module.js, style.css` 这三个文件中的任意一个文件，页面会进行实时刷新预览。

通过`DevServer`启动的webpack会自动打开监听模式，当文件发生变化的时候，重新执行构建后在去通知`DevServer`。`DevServer`会让webpack在构建出的JS代码里面注入一个代理客户端用于控制网页，网页和`DevServer`直接会通过`webpack`协议通信，用来方便`DevServer`主动向客户端发送命令。`DevServer`在收到来自webpack的文件变化通知时，通过注入客户端控制网页刷新。

如果更改`index.html`文件，页面不会有任何变化的，也没有触发实时预览的机制。因为`webpack`在启动的时候，是配置里面的`entry`的入口文件去进行解析，只有`entry`本身，及其依赖的文件，才会被`webpack`添加到监听的列表中。

> 注意：通常设置好`webpack-dev-server`服务自动刷新预览功能之后，发现手机预览不了，其实是由于`webpack-pack-server`服务安全机制导致的，只允许本机访问，我们可以把host设置为0.0.0.0就可以允许或者设置为本机地址。

### devServer.inline

`DevServer`用于配置是否将这个代理客户端自动注入将运行在页面中的`Chunk`里，默认自动注入。`DevServer`会根据是否开启`inline`来调整网页的自动刷新策略。

* 开启`devServer.inline` ，则`DevServer`会在构建完变化后的代码通过代理客户端控制网页刷新。
* 关闭`devServer.inline` ，则`DevServer`无法直接控制要开发的网页。会通过`iframe`的方式去运行要开发的网页。

想要使用DevServer的模块热替换机制去实现实时预览，最方便的方法就是开启`inline`

```javascript
module.exports = {
    // ......
    devServer: {
      port: 7777,
      inline: true
    },
    module: {/*....*/}
};
```

### devServer.historyApiFallback

对于单页面程序，浏览器的`brower histroy`可以设置成`html5 history API/hash`，而设置为`html5 API`的，如果刷新浏览器会出现`404 not found`，原因是它通过这个路径（比如： /activities/2/ques/2）来访问后台，所以会出现***404***，而把`historyApiFallback`设置为`true`那么所有的路径都执行`index.html`。

```javascript
module.exports = {
    // ......
    devServer: {
      port: 7777,
      inline: true,
      historyApiFallback: {
        // 使用正则匹配命中路由
        rewrites: [
          // user 开头的返回user.html
          {from: /^\/user/, to: '/user.html'},
          // game 开头的返回game.html
          {from: /^\/game/, to: '/game.html'},
          // 其他的返回index.html
          {from: /./, to: '/index.html'}
        ]
      },
    },
    module: {/*....*/}
};
```

### DevServer.proxy

启用proxy，来解决前端的跨域问题。

```
module.exports = {
    // ......
    devServer: {
    // ......
      // 代理到后端的接口
      proxy: {
        // 只有/api开头的请求地址，才会被代理
        // 如果请求地址是 /test/home,这种不以/api开头的，是不会被代理的
        // 示例： /api/logout, 最终会变成  http://api.xxx.com/v1/logout
        "/api/*": {
          // 目标服务器地址
          target: "http://127.0.0.1:7001/api/v1",
          // 目标服务器地址是否是安全协议
          secure: false,
          // 是否修改来源, true时-->让目标服务器以为是webpack-dev-server发出的请求
          changeOrigin: true,
          // '/api/login' => target + '/login'
          // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
          pathRewrite: { "^/api": "/" }
        },
        // 启用热替换属性
        hot: true,
        // 使用颜色
        colors: true,
      },
    },
};
```

### devServer.allowedHosts

`devServer.allowedHosts` 可以进行配置白名单，只有HTTP请求的HOST在列表里的才可以正常的返回。

```javascript
module.exports = {
    // ......
    devServer: {
      port: 7777,
      inline: true,
      allowedHosts: [
        '.host.com',
        '.host2.com'
      ]
    },
    module: {/*....*/}
};
```

### devServer.https

```javascript
const fs = require('fs');
module.exports = {
    // ......
    devServer: {
      port: 7777,
      inline: true,
      https: {
          key: fs.readFileSync('/path/to/server.key'),
          cert: fs.readFileSync('/path/to/server.crt'),
          ca: fs.readFileSync('/path/to/ca.pem'),
      }
    },
    module: {/*....*/}
};
```

### 模块热替换

模块热替换就是在不重新加载整个网页的情况下，通过将被更新过的模块替换老的模块，在进行执行，实现实时预览。

模块热替换默认是关闭的，使用`--hot`参数，就可以使用。

### 支持 Source Map <a href="#zhi-chi-sourcemap" id="zhi-chi-sourcemap"></a>

在浏览器运行的JS代码都是编译输出的代码，可读性比较差。不管是开发环境还是正式环境，我们都希望可以定位到bug的源代码的具体位置。都可以通过调试工具`Source Map`  映射代码，可以在源代码进行断点调试。

webpack生成`Source Map`是需要使用`--devtool source-map` 参数。或着通过配置文件。

```
module.exports = {
    // ......
    devServer: {/*....*/},
    devtool: 'source-map',
    module: {/*....*/}
};
```

&#x20;Source Map在Chrome 浏览器的开发者工具，在 Sources 栏中看到可调试的源代码。

![](https://288769627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSJH3H-ERd3Zk8a7n76%2F-LSXFIZsbz5dDfK4caK1%2F-LSXSRMZ2q8qaoF6c9pO%2Fimage.png?alt=media\&token=f4747264-7cbd-4bd7-9485-0d7c0b961525)