配置

  1. contentBase(boolean | string | array):
  2. open（boolean）: 第一次构建完成时，自动用浏览器打开网页，默认是true

  3. openPage(string): 配置项用于打开指定 URL 的网页。

    1. openPage: '/different/page'

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

  5. host(string): 用于配置DevServer服务器监听的地址
  6. proxy: 当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url ,解决开发环境的跨域问题
  7. allowedHosts: 配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回
  8. compress(boolean): 配置是否启用 gzip 压缩。boolean 为类型，默认为 false
  9. overlay(boolean): 出现编译器错误或警告时，在浏览器中显示全屏覆盖层，默认false

  10. historyApiFallback(boolean | object)： 当使用html5 history api,将会在响应404时返回index.html。

    • 用法1：boolean值

      1. historyApiFallback: true

    • 用法2：object, 传递一个object来做更多的定制

      1. historyApiFallback: {
      2. rewrites: [
      3. { from: /^\/$/, to: '/views/landing.html' },
      4. { from: /^\/subpage/, to: '/views/subpage.html' },
      5. { from: /./, to: '/views/404.html' }
      6. ]
      7. }

    • 当在路径中使用.符号，需要使用disableDotRule配置。

      1. historyApiFallback: {
      2. disableDotRule: true
      3. }

    • 更多设置，参考connect-history-api-fallback文档

  11. stats(string): 用来控制编译的时候shell上的输出内容.

没有设置devServer.stats时候编译输出是这样子的(其中看起来有许多看似不重要的文件也被打印出来了)
image.png
stats: “errors-only”表示只打印错误
我们把配置改成：

  1. devServer: {
  2.    contentBase: path.join(__dirname, "dist"),
  3.    stats: "errors-only"
  4. }

因为只有错误才被打印，所以，大多数信息都略过了
image.png
stats可能的值

Preset Alternative Description
errors-only none 只在产生error时打印日志
minimal none 只打印errors或文件第一次被编译时
none false 禁止打印日志
normal true 标准打印日志
verbose none 打印所有日志
  1. quiet(string): 和devServer.stats属于同一类型的配置属性
    • 当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告

  2. clientLogLevel（String）:当使用inline mode，devTools的命令行中将会显示一些调试信息，如：before loading，before an error 或 Hot Module Replacement被启用。这类调试信息，可能会让输出变得比较乱。可以通过如下设置禁止显示上述的调试信息。

    1. clientLogLevel: "none"

    其中的值可以是none,error,warning或info(默认)。注意console一致都会显示bundle error和warning。上面的配置只对log级别低的message有效。

  3. hot(string) 和 inline(string): 在此之前要先说一下自动刷新和模块热替换机制，两个机制是紧紧联系在一起的

    • 当我们对代码做了一些修改然后保存后，页面会自动刷新，我们所做的修改会直接同步到页面上，而不需要我们刷新页面，或重新开启服务
    • 在热替换（HMR）机制里，不是重载整个页面，HMR程序会只加载被更新的那一部分模块，然后将其注入到运行中的APP中

webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制

  1. iframe mode(默认,无需配置)

页面被嵌入在一个iframe里面，并且在模块变化的时候重载页面

  1. inline mode（需配置）添加到bundle.js中
    • 在配置中写入devServer.hot：true和devServer.inline：true
    • 增加一个插件配置webpack.HotModuleReplacementPlugin()
      1. var webpack = require('webpack')
      2. module.exports = {
      3. /*省略entry ,output等内容*/
      4. plugins:[
      5.    new webpack.HotModuleReplacementPlugin()
      6. ],
      7. devServer: {
      8.    inline:true,
      9.    hot:true
      10. }
      11. }
      打开页面：
      image.png
      如果有上面两行输出则表示已经配置成功

配置服务的三种方式

  1. 在webpack.config.js输出对象中的devServer属性中写配置

  2. 写在package.json中，写在node 命令对应的脚本中，例如我们可以写成：

    1. "scripts": {
    2. "start": "node_modules/.bin/webpack-dev-server --port 8080 --inline true "
    3. }

  3. 使用纯node的API实现，下面是一个官方给的例子

    1. var config = require("./webpack.config.js");
    2. config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
    3. var compiler = webpack(config);
    4. var server = new WebpackDevServer(compiler, {
    5.     /*我们写入配置的地方*/
    6. });
    7. server.listen(8080);

参考文档

Webpack DevServer配置