深入浅出webpack学习2--配置DevServer

双面人

发布于 2019-04-10 15:18:17

7480

发布于 2019-04-10 15:18:17

文章被收录于专栏：热爱IT热爱IT

devServer

上一章介绍过DevServer可以用来提高开发效率，它提供一些配置可以改变DevServer的默认行为。要配置DevServer除了在配置文件里通过devServer传入参数外，还可以通过命令行参数传入。注意只有在通过DevServer去启动webpack时配置文件里devServer才会生效，因为这些参数所对应的功能都是DevServer提供的，webpack本身并不认识devServer配置项。

1. hot

devServer.hot配置是否启用模块热替换功能。DevServer默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实现预览，开启模块热替换功能后在不刷新整个页面的情况下通过用心模块替换老模块来实现实时预览。

2. inline

DevServer的实时预览功能依赖注入到页面里的代理客户端去接受来自DevServer的命令和负责刷新网页的工作。devServer.inline用于配置是否自动注入这个代理客户端到将运行在页面的Chunk里面，默认是会自动注入。DevServer会根据你是否开启inline来调整它的自动刷新策略：

1. 如果开启inline， DevServer会在构建完变化后的代码时通过代理客户端控制网页刷新。
2. 如果关闭inline， DevServer将无法直接控制要开发的网页。这时它会通过iframe的方式去运行要开发的网页，当构建完变化后的代码通过刷新iframe来实现实时预览。

3. historyApiFallback

devServer.historyApiFallback用于方便的开发使用HTML5 HistroyAPI的单页应用。这类单页应用要求服务器针对任何命中的路由都返回一个对应的HTML文件，例如在访问http://localhost/user和http://localhost/home时都返回index.html文件，浏览器端的JavaScript代码会从URL里解析出当前的状态，显示对应的界面。

这会导致任何请求都会返回index.html文件，这智能用于只有一个HTML文件的应用。

如果应用由多个单页应用组成，这时就需要DevServer根据不同的请求返回不同的HTML文件：配置如下：

historyApiFallback: {
    //使用正则匹配命中路由
    rewrites: [
        {from: /^\/user/, to: '/user.html'},
        {from: /^\/game/, to: '/game.html'},
        {from: /./, to: '/index.html'}
    ]
}

4. contentBase

devServer.contentBase配置DevServer HTTP服务器的文件根目录。默认情况下为当前执行目录，所以一般不必设置它，除非有额外的文件需要被DevServer服务。例如你想把项目根目录下的public目录设置成DevServer服务器的文件根目录：

devServer: {
    contentBase: path.join(__dirname, 'public')
}

DevServer服务器通过HTTP服务暴露出的文件分为两类：

1. 暴露本地文件
2. 暴露webpack构建出的结果，由于构建出的结果交给DevServer，所以你在使用DevServer时在本地找不到构建出的文件。

contentBase只能用来配置暴露本地文件的规则，你可以通过contentBase: false来关闭暴露本地文件。

5. headers

devServer.headers配置项可以在HTTP响应中注入一些HTTP响应头，使用如下：

devServer: {
    headers: {
        'X-foo': 'bar'
    }
}

6. host

devServer.host配置项用于配置DevServer服务器监听的地址。如果你想要局域网中其他设备访问你本地的服务，可以在启动的时候带上--host 0.0.0.0.host的默认值是127.0.0.1即只有本地可以访问DevServer的HTTP服务。

7. port

devServer.port配置项用于配置DevServer服务监听的端口，默认使用8080端口。如果8080端口已经被其他程序占有就使用8081....

8. allowedHosts

devServer.allowedHosts配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回，使用如下：

allowedHosts: [
    //匹配单个域名
    'host.com',
    'sub.host.com',
    / host2.com 和所有的子域名 *.host2.com 都将匹配
    '.host.com'
]

9. disableHostCheck

devServer.disableHostCheck配置项用于配置是否关闭用于DNS重绑定的HTTP请求的host检查。DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。它通常用于搭配 --host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

10. https

DevServer 默认使用 HTTP 协议服务，它也能通过 HTTPS 协议服务。有些情况下你必须使用 HTTPS，例如 HTTP2 和 Service Worker 就必须运行在 HTTPS 之上。要切换成 HTTPS 服务，最简单的方式是：

devServer:{
  https: true
}

DevServer 会自动的为你生成一份 HTTPS 证书

devServer:{
  https: {
    key: fs.readFileSync('path/to/server.key'),
    cert: fs.readFileSync('path/to/server.crt'),
    ca: fs.readFileSync('path/to/ca.pem')
  }
}

11. clientLogLevel

devServer.clientLogLevel 配置在客户端的日志等级，这会影响到你在浏览器开发者工具控制台里看到的日志内容。 clientLogLevel 是枚举类型，可取如下之一的值 none | error | warning | info。默认为 info 级别，即输出所有类型的日志，设置成 none 可以不输出任何日志。