使用webpack-dev-server

每次要编译代码时，手动运行npx webpack | npx webpack --config webpack.config.js | npm run build 很麻烦，因此，选择一个开发工具，可以帮助在代码发生变化后自动编译代码：

• webpack's Watch Mode
• webpack-dev-server
• webpack-dev-middleware

多数场景中，需要使用 webpack-dev-server，提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

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

修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

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

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

package.json

现在，在命令行中运行 npm start，就会看到浏览器自动加载页面。可以修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。

确实很方便。。。其他两种开发工具不做介绍，用的最多的就是第二种，需要了解的，请查看webpack选择开发工具。

好了，这个原理已了解！！！