webpack-dev-server

webpack-dev-server 是一个用于开发环境的轻量级服务器，它与 webpack 模块打包工具结合使用，提供了实时重新加载（live reloading）和热模块替换（hot module replacement）等功能，使得在开发过程中可以快速地预览和调试应用程序。

通过 webpack-dev-server，你可以在本地启动一个服务器，并且监听指定的端口。当你修改了源代码文件时，webpack-dev-server 会自动重新编译并刷新浏览器，使你能够即时看到修改后的效果。同时，它还支持热模块替换，即在不刷新整个页面的情况下，只替换发生改变的模块，从而提高开发效率。

要使用 webpack-dev-server，你需要先安装 webpack 和 webpack-dev-server：

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

然后，在 webpack 配置文件中配置 devServer 选项：

module.exports = {
  // ...其他配置项

  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 设置服务器从哪个目录提供内容
    compress: true, // 启用 gzip 压缩
    port: 9000, // 指定服务器监听的端口号
  },
};

最后，在 package.json 文件中添加一个脚本命令以启动 webpack-dev-server：

{
  "scripts": {
    "start": "webpack-dev-server --open"
  }
}

通过运行 `npm start` 命令，就可以启动 webpack-dev-server，并在浏览器中打开应用程序。每次修改源代码后，都会自动重新编译并刷新页面。这样，你就可以方便地进行开发调试了。