webpack-dev-server的用法是什么 - 问答

webpack-dev-server是一个基于Node.js的开发服务器，用于在开发过程中提供实时的热更新和自动刷新功能。它可以监听文件的变化，并在文件改变时重新编译和刷新页面，以提高开发效率。

使用webpack-dev-server的步骤如下：

安装webpack-dev-server：在项目根目录下执行 npm install webpack-dev-server --save-dev 命令进行安装。
在webpack配置文件中配置devServer选项：

module.exports = {
  // ...其他配置项
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), //指定服务的根目录
    port: 8080, //指定服务端口号
    hot: true, //启用热更新
    open: true, //自动打开浏览器
  },
};

在package.json文件中添加启动脚本：

{
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    //...
  }
}

运行开发服务器：在项目根目录下执行 npm start 命令启动webpack-dev-server。

启动后，webpack-dev-server会将项目的代码编译并打包到内存中，并启动一个本地服务器，监听指定的端口号。在浏览器中访问 http://localhost:8080 就可以查看项目的运行结果。当代码发生改变时，webpack-dev-server会自动重新编译，并通过热更新的方式将改变的部分实时更新到浏览器中，无需手动刷新页面。

此外，webpack-dev-server还提供了其他一些选项，如代理、自定义404页面等，可以根据具体需求进行配置。

0 赞

0 踩