6. 开启热更新 -- webpack-dev-server

问题： 开发过程中，修改代码后，想在页面看效果，该怎么做呢？

    做法一：开发过程中，每次修改完代码后，重新执行打包命令。（弊端：每次改动代码都得，重新打包，太影响开发效率。）

    做法二：在 package.json 中的 script 配置的短命令时，例如："npm run dev";  在其命令后添加 --watch；监听文件变化

    （弊端：浏览器不会自动刷新，需要手动去刷新 F5 ）

    做法三：目前做法是 -- 使用 WDS （webpack-dev-server），进行热更新。

    使用WDS的步骤如下：   

    1）安装命令： npm install webpack-dev-server -save-dev || npm i webpack-dev-server -D   

    2）在 webpack.config.js 中配置

  在webpack.config.js中的配置如下（不属于五个基本配置项）：

开发服务器 devServer: 用来自动化（自动编辑、自动打开浏览器、自动刷新浏览器~~）

特点：只会在内存中编译打包，不会有任何输出。

启动devServer指令：npx webpack-dev-server

devServer: {

        contentBase: './dist', // 指定了服务器资源的根目录( 启动打包后的访问的位置,   contentBase 代表我要运行的目录， resolve(dirname, 'build')  是构建后的目录。  )

        open: true, // 打开浏览器

        port : '3000'.  // 更改启动后的端口，

        host：'localhost',  // 设置的是服务器的主机号

        autoOpenBrowser: true, // 默认打开浏览器

        progress: true, // 可以在编辑器的控制台展示一下进度（进度）

        compress: true, // 启动gzip压缩

        hot: true, // 启动热更新

}

webpack-dev-server 好处：

    1、输出的文件只存在于内存中,不输出真实的文件 ( 只是生成了一个内存(RAM)中的打包 )

你要提供哪里的内容给虚拟服务器用。这里最好填 绝对路径。

// 单目录contentBase: path.join(__dirname, "public")

// 多目录contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]默认情况下，它将使用您当前的工作目录来提供内容。

就这样子，欢迎指正~