webpack配置devServer详解

最新推荐文章于 2025-07-08 22:57:49 发布

云卷云舒%

最新推荐文章于 2025-07-08 22:57:49 发布

阅读量6.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_39290323/article/details/124081182

webpack 专栏收录该内容

12 篇文章

订阅专栏

本文档详细介绍了如何配置Webpack DevServer来实现静态资源目录监听、压缩、设置端口和域名，并开启自动刷新（Hot Module Replacement, HMR）。同时，通过代理设置解决了开发环境中的跨域问题，允许向不同端口的目标服务器发送请求并进行路径重写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视contentBase目录下的所有文件，一旦有变化就会reload
    watchContentBase: true,
    watchOptions:{
        // 忽略文件
        ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器的日志
    clientLogLevel: 'none',
    // 除了一些基本启动信息外，其他内容都不要显示
    quiet: true,
    // 如果出现错误信息，不要全屏提示
    overlay: false,
    // 服务器代理，解决开发环境下跨域问题
    proxy: {
        // 一旦devserver（5000）服务器接收到 /api/xxx的请求，就会把请求转发到另外一个服务器（3000）
        '/api': {
            target: 'http://localhost:3000',
            // 发送请求时，请求路径重写：将/api/xxx -> /xxx(去掉/api)
            pathRewrite:{
                '^/api': ''
            }
        }
    }
}