【webpack5】搭建开发服务器

解决问题：每次修改代码后需要重新编译

开发服务器&自动化

dev-server会在webpack搭建开发服务器，自动监视src目录下文件，一旦发生变化，自动重新打包。

安装：

npm i webpack-dev-server -D

配置：

  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

运行：

npx webpack serve

即可启动dev-server的配置

服务器运行并自动打开浏览器。更改代码会自动重新编译并且浏览器会自动刷新。

开发服务器不会输出资源，是在内存中编译打包