webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading).
This should be used for development only.
webpack-dev-server 启动有两种方式：
1.通过cmd line
2.通过node.js API

这里主要讲cmd line：

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
    // start
+   devServer: { 
+     contentBase: './dist'
+   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

添加一个 script 脚本，可以直接运行开发服务器(dev server)：

 {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",  // 此处
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

主要配置参数：

inline

| 在 dev-server 的两种不同模式之间切换 | 1.默认情况下，应用程序启用内联模式(inline mode)。这意味着一段处理实时重载的脚本被插入到你的包(bundle)中，并且构建消息将会出现在浏览器控制台。
2.也可以使用 iframe 模式，它在通知栏下面使用 <iframe> 标签，包含了关于构建的消息

| |

contentBase

| 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。devServer.publicPath 将用于确定应该从哪里提供 bundle，并且此选项优先。**`
| 默认情况下，将使用当前工作目录作为提供内容的目录。
但是你可以修改为其他目录 | |

compress

| 一切服务都启用gzip 压缩 | true | |

lazy

| 当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”。 | | |

filename

| 在惰性模式中，此选项可减少编译。 默认在惰性模式，每个请求结果都会产生全新的编译。使用 filename，可以只在某个文件被请求时编译。 | | |

headers

| 在所有响应中添加首部内容 | | |

historyApiFallback

| 1.当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。
2.通过传入一个对象，比如使用 rewrites 这个选项，此行为可进一步地控制 | 详见：
https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback | |

host

| 指定使用一个 host。 | 默认是 localhost。
如果你希望服务器外部可访问，指定如下：host: “0.0.0.0“ | |

port

| 指定要监听请求的端口号 | | |

proxy

| 代理请求 | 详见：
https://www.webpackjs.com/configuration/dev-server/#devserver-proxy | |

hot

| 启用 webpack 的模块热替换特性 | | |

https

| 默认情况下，dev-server 通过 HTTP 提供服务。也可以选择带有 HTTPS 的 HTTP/2 提供服务： | 详见：
https://www.webpackjs.com/configuration/dev-server/#devserver-https | |

progress

| 将运行进度输出到控制台

只用于命令行工具(CLI)

| | |

public

| 当使用内联模式(inline mode)并代理 dev-server 时，内联的客户端脚本并不总是知道要连接到什么地方。它会尝试根据 window.location 来猜测服务器的 URL | 如果失败，需要这样
| |

publicPath

| 此路径下的打包文件可在浏览器中访问 | 假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问 | |

watchOptions

| 与监视文件相关的控制选项 | webpack 使用文件系统(file system)获取文件改动的通知。在某些情况下，不会正常工作。例如，当使用 Network File System (NFS) 时。Vagrant 也有很多问题。在这些情况下，请使用轮询 |

参考：
1.https://www.webpackjs.com/configuration/dev-server/
2.https://segmentfault.com/a/1190000006670084