在每次编译代码时，手动运行npx webpack --config config/webpack.prod.js会显得很麻烦，webpack-dev-server 帮助我们在代码发生变化后自动编译代码。

    webpack-dev-server 提供了一个基本的 web server，并且具有实时重新加载功能。

    webpack-dev-server 默认配置 conpress: true，为每个静态文件开启 gzip compression。

    安装 ： 

    1. npm install --save-dev webpack-dev-server

    修改开发环境配置文件 webpack.dev.js：

    1. module.exports = {
    2.     devServer: {
    3.     // 告诉服务器从哪里提供内容，只有在你想要提供静态文件时才需要。
    4.     contentBase: './dist',
    5.   }
    6. }
    9. module.exports = {
    10.     static: {
    11.     //directory: path.join(__dirname, 'dist')
    12.     directory: resolveApp('dist')
    13.   },
    14.   port: 8888,
    15.   // 开启热启动
    16.   hot: true
    17. }

    完成上述配置后，可以通过 npx webpack serve —open —config config/webpack.dev.js 实时编译。

    1. npx webpack serve --open --config config/webpack-dev.js