webpack-dev-server 安装与配置详解

作者：测试鸭

时间：2026-10-26

本文详细介绍 webpack-dev-server 的安装步骤与核心配置。该工具通过内存存储提升构建性能，支持文件修改自动编译。教程涵盖从环境准备、依赖安装到 webpack.config.js 配置及 package.json 命令设置的完整流程，并补充了 html-webpack-plugin 的使用以优化 HTML 资源管理。

文章目录

核心作用

其功能类似于在本地启动一个 Web 服务器，允许用户通过 HTTP 网络请求直接访问资源。
该工具显著提升了 I/O 性能，因为它将编译后的文件直接存储在内存中，以空间换时间的方式加速访问。
它消除了手动编译文件的必要性，每次保存文件时都会自动完成编译并发布。需要注意的是，从 webpack 4 开始，也可以通过开启 watch 属性来实现类似功能。

安装步骤

运行环境要求

项目需包含依赖："webpack": "^5.33.2"
项目需包含依赖："webpack-cli": "^4.6.0"

1. 前提条件

webpack-dev-server 依赖于 webpack，因此必须先安装 webpack。

2. 若使用 webpack 4 及以上版本，还需额外安装 webpack-cli。

npm install webpack --save-dev
npm install  webpack-cli --save-dev

3. 安装 webpack-dev-server

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

4. 编写 webpack.config.js 配置文件

由于 webpack-dev-server 完全依赖 webpack，因此必须编写相应的 webpack 配置文件。例如：

核心作用

// path 模块解决项目路径问题
const path = require('path')
module.exports = {
    //打包模式，一定要配置，不然打包速度慢很多
    mode: 'development', //开发模式
    // mode:'production',//生产模式

    //入口  
    entry: path.join(__dirname, './src/main.js'), // __dirname 是node的通用变量，代表当前项目路径
    output: {
        // 配置打包后文件存放目录
        path: path.join(__dirname, './dist'),
        // 配置打包后文件的名称
        filename: 'bundle.js'
    },
    // 监听文件改动，自动打包
    //  watch: true,
    devServer: {
        contentBase: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲
        compress: true, // 压缩资源
        port: 9000, // 指定服务器的端口号
        open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开
    },
}