配置并开启webpack-dev-server服务，并设置端口号为8081

好的，以下是配置并开启webpack-dev-server服务的步骤：

1. 首先在命令行中输入以下命令来安装webpack-dev-server：

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

2. 在webpack配置文件中添加以下代码：

devServer: {
  port: 8081,
  contentBase: './dist',
  hot: true
}

这里的port选项设置端口号为8081，contentBase选项指定webpack-dev-server服务的根目录，hot选项开启热更新功能。

3. 在package.json文件中添加启动命令：

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

这里的--open选项可以自动打开浏览器，启动服务。

4. 在命令行中运行以下命令启动webpack-dev-server服务：

npm start

服务启动后，可以在浏览器中访问 http://localhost:8081 来查看页面。

相关问题

webpack-dev-server配置

webpack-dev-server是一个开发服务器，它可以在本地运行一个web服务器，用于开发和测试应用程序。它可以自动编译和打包代码，并且支持热更新，可以在代码修改后自动刷新页面，提高开发效率。webpack-dev-server的配置包括以下几个方面：

1. 入口文件配置：指定webpack打包的入口文件路径。

2. 输出文件配置：指定webpack打包后的输出文件路径和文件名。

3. 模块解析配置：指定webpack如何解析模块路径和文件扩展名。

4. 插件配置：指定webpack使用的插件，如热更新插件等。

5. devServer配置：指定webpack-dev-server的配置，如端口号、代理等。

6. 其他配置：如source-map配置、resolve配置等。

以上是webpack-dev-server的基本配置，具体配置可以根据项目需求进行调整。

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，并在浏览器中打开应用程序。每次修改源代码后，都会自动重新编译并刷新页面。这样，你就可以方便地进行开发调试了。