webpack 搭建本地开发服务器

在此之前的 webpack 配置是必不可少的。但是开发体验并不好，一直需要 npm run build 手动打包。

我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示；
为了完成自动编译，webpack提供了几种可选的方式：

• webpack watch mode；
• webpack-dev-server（常用）；
• webpack-dev-middleware；

Webpack watch

webpack给我们提供了watch 模式。
在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译；
我们不需要手动去运行 npm run build指令了。
注意：它只是会自动编译打包，要在浏览器实时查看还得配合 live-server 打开 html。

如何开启 watch 呢？两种方式：

• 方式一：在导出的配置文件中，也就是 webpack.config.js 中添加 watch: true;
• 方式二：在启动 webpack 的命令中，添加 --watch 的标识；

我们可以在 npm 脚本中添加标识，因为 scripts 中的脚本，实际就是用 npm run 的方式帮你在命令行执行了后面的命令。这里的 webpack 也一样，在命令行执行，本质靠的还是 webpack-cli，包括 --watch 这种属性配置也是靠的 cli 添加到配置文件中。

{
   
  "scripts": {
   
    "build": "webpack --watch"
  },
}

webpack-dev-server

如果我们想不借助 live-server 的情况下，实现 live reloading（实时重新加载）的功能，我们可以使用 webpack-dev-server。
它将开启一个 express 服务器，所以浏览器打开，就和打开一般的网站一样，会先下载 index.html，然后再从 index.html 中去下载其他的文件。

事实上 webpack-dev-server 在编译之后不会写入任何输出文件。而是将 bundle 文件保留在内存中

安装：npm i webpack-dev-server -D

使用：webpack serve启动一下就行，通常我们也是加入 npm 脚本中使用
"serve": "webpack serve --config webpack.config.js"

webpack-dev-server 服务查找文件的路径是：

• http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]

output: {
   
  filename: "js/bundle.js",
  path: path.resolve(__dirname, "./dist"),
  publicPath: