首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何定义webpack dev-server (hot)应该关注的文件夹?

webpack dev-server (hot)是一个用于开发环境的轻量级服务器,它能够提供实时的编译和热模块替换(Hot Module Replacement)功能,使开发者能够在修改代码后立即看到更新的效果,而无需手动刷新页面。

在配置webpack dev-server时,我们可以通过contentBase选项来指定应该关注的文件夹。这个选项接受一个字符串或字符串数组作为参数,表示需要被服务器监视的文件夹路径。

通常情况下,我们会将contentBase设置为项目的根目录,以便dev-server能够监视整个项目文件夹。这样,当我们修改项目中的任何文件时,dev-server都会自动重新编译并刷新浏览器,以展示最新的变化。

以下是一个示例webpack配置文件中关于dev-server的部分:

代码语言:txt
复制
module.exports = {
  // 其他配置项...
  devServer: {
    contentBase: './dist', // 设置关注的文件夹为dist目录
    hot: true // 启用热模块替换功能
  }
};

在上述示例中,contentBase被设置为'./dist',意味着dev-server会关注项目根目录下的dist文件夹。如果我们修改了dist文件夹中的任何文件,dev-server将会重新编译并刷新浏览器。

需要注意的是,contentBase选项也可以接受绝对路径,以便更灵活地指定关注的文件夹。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活选择配置,支持多种操作系统,适用于各类应用场景。了解更多信息,请访问腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,可用于存储和处理各种类型的文件和数据。了解更多信息,请访问腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

webpack热更新原理(面试大概率会问)_2023-02-28

webpack-dev-server/client 端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据...思考:模块内容的变更浏览器又是如何感知的? webpack-dev-middleware利用sockjs和webpack-dev-server/client建立webSocket长连接。...功能块的解耦,各个模块各司其职,dev-server/client 只负责消息的传递而不负责新模块的获取,而这些工作应该有 HMR runtime 来完成,HMR runtime 才应该是获取新代码的地方...综上所述,HMR 的工作流中,不应该把新模块代码放在 websocket 消息中。...webpack-dev-server/client通过webpack/hot/dev-server中的HMR去请求新的更新模块,HMR主要借助JSONP。

85620

webpack热更新原理(面试大概率会问)

webpack-dev-server/client 端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据...webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。...思考:模块内容的变更浏览器又是如何感知的?webpack-dev-middleware利用sockjs和webpack-dev-server/client建立webSocket长连接。...功能块的解耦,各个模块各司其职,dev-server/client 只负责消息的传递而不负责新模块的获取,而这些工作应该有 HMR runtime 来完成,HMR runtime 才应该是获取新代码的地方...webpack-dev-server/client通过webpack/hot/dev-server中的HMR去请求新的更新模块,HMR主要借助JSONP。

1K00
  • webpack的Hot Module Replacement运行机制

    使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改、添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下。它究竟是怎么运作的呢?...跟进到这里,我们可以推测出这个交互过程: (0)webpack首次编译时将如何更新更新模块(update-method)和接收后端推动事件(event-source)的代码打包到bundle之中; (1...)webpack进入watch 模式,在项目代码发生变化的时候重新编译; (2)将编译产出存放在dev-server,此处的编译只针对变动的模块,产出应该包含上文中提到的oldbundlehash.hot-update.json...和oldbundlehash.hot-update.js文件; (3)dev-server中使用hot-middleware中间件向前端发送built事件; (4)前端收到通知后,向后端请求最新的变动文件...现在大家应该清楚了 webpack的Hot Module Replacement的基本原理了,官方文档中提到了如何根据最新的模块替换旧模块的方法,这个会放到下一篇文章中进行介绍。

    1.3K50

    Webpack 的 HMR 运行机制

    )的代码,并打包到 bundle 之中; webpack 进入 watch 模式,在项目代码发生变化的时候重新编译,并将编辑的进展实时通知前端; 将编译产出存放在 dev-server,此处的编译只针对变动的模块...,产出应该包含上文中提到的 oldbundlehash.hot-update.json 和 oldbundlehash.hot-update.js 文件; dev-server 中使用 hot-middleware...webpack.dev.conf.js 涉及到 Hot Module Replacement 的地方主要有两处: 1. entry 的配置: 在每个入口 bundle 开头引入了 event-source...require('eventsource-polyfill') var hotClient = require('webpack-hot-middleware/client?...现在大家应该清楚了 webpack的Hot Module Replacement 的基本原理了,官方文档中提到了如何根据最新的模块替换旧模块的方法,这个知识点暂不在本文进行介绍。

    1.1K20

    十五:开发模式与webpack-dev-server

    在之前的课程中,我们都没有指定参数mode。但是执行webpack进行打包的时候,自动设置为production,但是控制台会爆出warning的提示。...在开发模式下,还需要热重载、路由重定向、挂代理等功能,webpack4已经提供了devServer选项,启动一个本地服务器,让开发者使用这些功能。 2. 如何使用开发模式?...启动效果如下图所示: 虽然控制台输出了打包信息(假设我们已经配置了热重载),但是磁盘上并没有创建/dist/文件夹和打包文件。控制台的打包文件的相关内容是存储在内存之中的。 3....并且指定devServer.hot为true。 有了这两个插件,在项目的 js 代码中可以针对侦测到变更的文件并且做出相关处理。...参考资料 dev-server 文档: https://www.webpackjs.com/configuration/dev-server/ 开发模式 文档:https://www.webpackjs.com

    72130

    【Webpack】627- 了不起的 Webpack HMR 学习指南(含源码分析)

    5. devServer 常用配置和技巧 5.1 常用配置 根据目录结构的不同,contentBase、openPage 参数要配置合适的值,否则运行时应该不会立刻访问到你的首页。...那么,Webpack 编译源码所产生的文件变化在编译时,替换模块实现在运行时,两者如何联系起来? 带着这两个问题,我们先简单看下 HMR 核心工作流程(简化版): ?...当我们在配置文件中配置了 devServer.watchContentBase 为 true ,Webpack-dev-server 会监听配置文件夹中静态文件的变化,发生变化时,通知浏览器端对应用进行浏览器刷新.../hot/dev-server 监听浏览器端 webpackHotUpdate 消息,将新模块 hash 值传到客户端 HMR 核心中枢的 HotModuleReplacement.runtime ,并调用...参考文章 1.官方文档《Hot Module Replacement》 2.《Webpack HMR 原理解析》 3.《webpack HMR》 4.《配置 dev-server》

    1.1K20

    了不起的 Webpack HMR 学习指南(含源码分析)

    5. devServer 常用配置和技巧 5.1 常用配置 根据目录结构的不同,contentBase、openPage 参数要配置合适的值,否则运行时应该不会立刻访问到你的首页。...那么,Webpack 编译源码所产生的文件变化在编译时,替换模块实现在运行时,两者如何联系起来?...当我们在配置文件中配置了 devServer.watchContentBase 为 true ,Webpack-dev-server 会监听配置文件夹中静态文件的变化,发生变化时,通知浏览器端对应用进行浏览器刷新.../hot/dev-server 监听浏览器端 webpackHotUpdate 消息,将新模块 hash 值传到客户端 HMR 核心中枢的 HotModuleReplacement.runtime ,并调用...参考文章 1.官方文档《Hot Module Replacement》 2.《Webpack HMR 原理解析》 3.《配置 dev-server》  [bg]

    1.2K00

    webpack5热更新打包TS

    模块热替换(HMR - Hot Module Replacement)是 webpack 提供的最有用的功能之一。...配置准备 在之前的文章 《webpack打包typescript》里面,关于webpack如何打包ts文件已经讲过一次,需要安装的插件还是需要继续依赖 插件: typescript webpack webpack-cli...---- 现在运行npm run start命令,出现了下面的运行结果: 既然说 Compiled successfully.已经成功,那么在相应的TypeScript文件夹下应该有对应的tsc_out.js...但是,我没找到生成的js文件,不应该呀。...本篇文章的重点其实并不在于如何打包typescript,反而是在于如何配置webpack的热更新devServer 关于如何在webpack5中配置typescript,我发现在官方网站上也有说明:https

    2.1K11

    Webpack知识点速记

    /Gulp需要将整个前端构建过程拆分成多个task,合理控制所有task的调用关系 Webpack需要定义好入/出口,并需要清楚对于不同类型资源应该用什么loader解析编译 Grunt/Gulp是基于任务和流...Webpack的热更新是如何做到的?说明其原理? Webpack的热更新有称为热替换(Hot Module Replacement),缩写为HMR。...第二步是Webpack-dev-server和Webpack之间的接口交互,而在这一步,主要是dev-server的中间件Webpack-dev-middleware和Webpack之间的交互,Webpack-dev-middleware...webpack-dev-server/client端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了Webpack,webpack/hot/dev-server的工作就是根据webpack-dev-server...如何利用Webpack来优化前端性能?(提高性能和体验) 用Webpack优化前端性能是指优化Webpack输出结果,让打包的结果在浏览器运行快速高效。 压缩代码。

    90920

    关于webpack的面试题总结

    如何利用webpack来优化前端性能?(提高性能和体验) 如何提高webpack的构建速度? 怎么配置单页应用?怎么配置多页应用? npm打包时需要注意哪些?如何利用webpack来更好的构建?...webpack的热更新又称热替换(Hot Module Replacement),缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。 原理: ?...第二步是 webpack-dev-server 和 webpack 之间的接口交互,而在这一步,主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack...webpack-dev-server/client 端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据...webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。

    11.9K114

    vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js

    /* * Webpack 开发环境配置文件,用于开发环境构建dev-server发布的内容 * 执行npm run dev主要会用到这里Webpack配置 * 建议先查阅webapck.base.conf.js...的错误和日志收集起来,漂亮的展示给用户 // add hot-reload related code to entry chunks // 为基础设置的入口app,默认值是src/main.js关联热加载...config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development // devtool是开发工具选项,用来指定如何生成...插件,专门用来定义全局变量的,下面定义一个全局变量 process.env 并且值是如下 new webpack.DefinePlugin({ 'process.env': config.dev.env...// { NODE_ENV: '"development"' } }), // https://github.com/glenjamin/webpack-hot-middleware#

    963100

    前端工程化 - Webpack 常见面试题速查

    Plugin define-plugin 定义环境变量 html-webpack-plugin 简化 html 文件创建 uglifyjs-webpack-plugin 通过 uglifyjs 压缩 ES6...会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果 # Webpack 的热更新是如何实现的...热更新又称热替换(Hot Module Replacement)HMR。...webpack-dev-server 和 webpack 之间的接口交互,而这一步,主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互...,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据 webpack-dev-server/client 传给他的信息以及 dev-server 的配置决定是刷新浏览器还是进行模块热更新

    48340

    【webpack】从vue-cli 2x 到 3x 迁移与实践

    webpack使用配置的区别 3.webpack的使用 3.1 vue脚手架中的webpack目录结构 image.png 左图项目结构为vue-cli 2x版本脚手架生成的项目,build文件夹包含了...entry - 让 webpack 知道使用哪个模块,来作为构建其内部依赖图的开始 output - 让 webpack 知道在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ...., 当编译器要求时,将 HTML 最小化 复制代码 plugins - 通过插件引入来处理,用于转换某种类型的模块,可以处理:打包、压缩、重新定义变量等 webpack官方文档链接 ?...的这些选项改变,来改变其行为,常用配置有: hot - 是否启用 webpack的模块热替换功能 host - 指定使用一个 host可以让外部访问。...官网dev-server配置 (3) webpack.prod.conf.js 结构 // webpack.prod.conf.js 'use strict' const path = require

    1.1K30
    领券