使用webpack-dev-server做为开发阶段的web服务

我们在开发时一般都会有这样的行为：写一写源代码，然后用webpack打包，将打包后的文件放到服务器上运行，看看效果，之后再去写源代码，再打包，再放到服务器上看效果，如此反复，甚是低效。

要解决这个问题，我们只需要安装webpack-dev-server，它是通过Express来实现的静态服务器。它的好处是：它并不会真实的去打包文件，而是实现内存中打包，即将打包的文件写到内存中来运行。

首先，我们来安装它，代码如下：

npm install --save-dev webpack-dev-server

然后，在webpack.config.js文件中，添加devServer属性，进行配置操作，代码如下：

module.exports = {
...
    devServer: {                // 开发服务器的配置
        port: 3000,             //端口
        progress: true,         // 打包时显示进度条
        contentBase: './build', // 指定目录做为静态服务
        compress: true          // 启用gzip压缩
    }
...
};

最后，在package.json中添加运行webpack-dev-server的脚本：

...
"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
...

说明：在打包后的输出目录中，要有一个html文件，最好是index.html，否则运行服务后，访问网址会报错。

可以通过使用HtmlWebpackPlugin插件，来生成这个文件。