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

Webpack-dev-server在HTML页面中注入bundle,但不渲染任何内容

Webpack-dev-server是一个基于Node.js的开发服务器,它可以在开发过程中提供实时的编译和热更新功能。它的主要作用是将打包后的bundle文件注入到HTML页面中,以便在浏览器中实时预览和调试页面。

具体来说,Webpack-dev-server会在内存中生成打包后的bundle文件,并将其注入到HTML页面中的特定位置。这样,当我们在开发过程中修改了源代码并保存时,Webpack-dev-server会自动重新编译打包,并将新的bundle文件注入到HTML页面中,从而实现实时预览效果。

Webpack-dev-server的优势在于:

  1. 实时编译和热更新:Webpack-dev-server能够监听源代码的变化,并在保存时自动重新编译和更新页面,提高开发效率。
  2. 内存中的打包:Webpack-dev-server将打包后的文件保存在内存中,而不是写入磁盘,这样可以加快打包速度,并减少磁盘IO的开销。
  3. 轻量级的开发服务器:Webpack-dev-server是一个轻量级的开发服务器,可以快速启动,并提供简单易用的配置选项。

Webpack-dev-server适用于各种前端开发场景,特别是在开发过程中需要频繁修改和调试页面的情况下。它可以与各种前端框架和工具配合使用,如React、Vue.js等。

腾讯云提供了类似的产品,可以替代Webpack-dev-server的功能,例如腾讯云的云开发(CloudBase)服务。云开发提供了一站式的云端开发平台,包括云函数、云数据库、云存储等功能,可以方便地进行前端开发和部署。具体产品介绍和文档可以参考腾讯云云开发的官方网站:腾讯云云开发

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

在上面例子中产生错误和后来解决错误的原因: 产生错误:因为bundle.js被"放在了"我们的项目根目录里,dist/html里<script src="..../<em>bundle</em>.js"自然就找到bundle.js了 webpack打包和webpack-dev-server开启服务的区别—— webpack输出真实的文件,而webpack-dev-server输出的文件只存在于内存...have to be served in place of any 404 responses) dist目录下新增一个HTML页面: /*剩下的都是很常规的HTML内容,故省略*/ 这里是404...refresh the page) 从内部角度看——模块热替换 热替换(HMR)机制里,不是重载整个页面,HMR程序会只加载被更新的那一部分模块,然后将其注入到运行的APP (In Hot Module...Iframe mode(默认,无需配置) 页面被嵌入一个iframe里面,并且模块变化的时候重载页面 2.inline mode(需配置)添加到bundle.js 当刷新页面的时候,一个小型的客户端被添加到

2.1K70

Vue+Node实现服务端渲染

页面内容什么都没有spider来了抓取的也是如上代码,这非常不利于seo。...3.node我们会用到 vue-server-renderer 帮我们node环境里面渲染出vue代码生成的html代码,这部分代码会直接返回给用户浏览器直接显示 开发阶段我们两个服务 如果直接访问...(渲染html代码)直接返回给用户,但是我们只是返回的html代码,如果要在页面上执行js逻辑,css样式等,我们还是得依赖于webpack-dev-server 给我们打包出来的客户端的app.js...这里我们可以通过axios请求 webpack-dev-server 获取资源然后插入到html返回给用户,这样用户才能看到正常页面,用户才能进行各种操作,路由跳转等。...因为路由是js写的,所以我们会获取到前端(webpack-dev-server)打包的一些js、css文件并插入到html这样就有了交互操作,界面美化 createBundleRenderer的第二个参数就派上用场了

3.1K30

我是如何调试 Webpack 问题的

可以看到,请求 http://localhost:9000 地址返回一大串 html 代码,且页面的 title 为 listing directory —— 也就是我们看到的文件列表页面: ?...嗐,其实这段描述就非常不明所以了,简单理解 output.publicPath 会改变产物资源 html 文件的路径,比如说 Webpack 编译完生成了 bundle.js 文件,默认情况下写到 html...这里只是调用标准化的 [express.static](https://expressjs.com/en/starter/static-files.html) 函数,注入静态资源服务功能,如果这个中间件运行的时候按路径找不到对应的文件资源...如果手动默认打开的路径后加上 output.publicPath 的内容: ? 果然,它又行了。 第五步:总结 嗐,你看,这就是源码分析的过程,繁琐但不复杂,简直人人都能成为技术大牛啊。...产物路径,没说会影响主页面的索引路径,开发者表示很 confuse 咯 webpack-dev-server 启动后,自动打开页面时没有链接后面自动追加 output.publicPath 值导致默认打开的路径与真正的

2.8K30

我是如何调试 Webpack 问题的

可以看到,请求 http://localhost:9000 地址返回一大串 html 代码,且页面的 title 为 listing directory —— 也就是我们看到的文件列表页面: 虽然不知道这是在那一层生成的...嗐,其实这段描述就非常不明所以了,简单理解 output.publicPath 会改变产物资源 html 文件的路径,比如说 Webpack 编译完生成了 bundle.js 文件,默认情况下写到 html...第四步:分析代码 结构分析 书上得来终须浅,debug 还需看源码啊,啥都别说了先打开 webpack-dev-server 包的代码看看内容吧: Tips: 读者也可以试试 clone webpack-dev-server...如果手动默认打开的路径后加上 output.publicPath 的内容: 果然,它又行了。 第五步:总结 嗐,你看,这就是源码分析的过程,繁琐但不复杂,简直人人都能成为技术大牛啊。...产物路径,没说会影响主页面的索引路径,开发者表示很 confuse 咯 webpack-dev-server 启动后,自动打开页面时没有链接后面自动追加 output.publicPath 值导致默认打开的路径与真正的

1.1K30

59.Vue 使用webpack构建vue项目

插件配置启动页面 前面配置生成bundle.js的使用时候,已经将其存储在内存编译生成。...那么能不能将index.html页面也加载存储到内存呢? 这个当然可以,可以使用html-wabpack-plugin插件来完成这部分工作。.../src/index.html'), // 指定 模板页面,将来会根据指定的页面路径,去生成内存页面 filename: 'index.html' // 指定生成的页面的名称...image-20200312233247458 这个插件的两个作用: 自动在内存根据指定页面生成一个内存的页面 自动,把打包好的 bundle.js 追加到页面中去 使用webpack打包css文件...image-20200313001123873 4.vm的data设置一个msg值,然后app渲染看看 main.js 如下: ?

2.6K30

webpack实战——资源输入与输出

webpack,vendor则指的是工程中用到的库、框架等第三方模块打包而产生的bundle。...多入口 刚才说了单页面应用,那么多页应用一般有多个入口,在此场景,为了尽可能减小资源的体积,我们则是希望每个页面加载自身必要的逻辑,而不是都打包到一个bundle。.../page3.js' }} 在上面配置,入口与页面一一对应,如此的话每个html则只需要引入各自的js就可以加载其所需的模块。...页面的资源分两种:一种是由HTML页面直接请求的,比如通过script标签加载的JS;另一种是由JS或者CSS请求的,比如异步JS、CSS请求的图片字体等。...webpack-dev-server,也配置了一个publicPath,作用是指定webpack-dev-server的静态资源服务路径。

84140

webpack配置完全指南

/index.js' },}  但是我们一个页面可能不止一个模块,因此需要将多个依赖文件一起注入,这时就需要用到数组了,代码demo2:module.exports = { entry:...自动生成页面  在上面的代码我们发现都是手动来生成index.html,然后引入打包后的bundle文件,但是这样太过繁琐,而且如果生成的bundle文件引入了hash值,每次生成的文件名称不一样,因此我们需要一个自动生成...html的插件;首先我们需要安装这个插件:npm install --save-dev html-webpack-plugin  demo3,我们生成了三个不同的bundle.js,我们希望在三个不同的页面能分别引入这三个文件.../index.html', filename: 'all.html', //页面注入title title: 'html webpack plugin title', //默认引入所有的...注  html-withimg-loader会导致html-webpack-plugin插件注入title的模板字符串失效,原封不动的展示页面

1.2K20

前端工程化:Webpack之常见配置详解

js文件,打包后的bundle.js文件会解析转换index.js文件下的内容,使得任何版本的浏览器都能兼容。...) 点开src,便自动展现了index.html页面(系统会默认打开index.html文件),我们对源代码的任何更改效果都会呈现在上面。...存放到实际的物理磁盘上 ⚫ 提高了实时打包输出的性能,因为内存比物理磁盘速度快很多 我们index.html的源代码页面上,也会隐式导入生成在内存的bundle.js文件。...HTML 插件(类似于一个模板引擎插件) ⚫ 可以通过此插件自定制 index.html 页面内容 思路:通过 html-webpack-plugin 插件,将 src 目录下的 index.html...生成后, 系统也会自动给它注入内存实时构建的bundle.js文件 六、loader加载器 1、概述: 实际开发过程,webpack 默认只能打包处理以 .js 后缀名结尾的模块。

1.2K12

带你五步学会Vue SSR

如果说SSR的过程中出现问题,还可以回滚到纯浏览器渲染,保证用户正常看到页面。...所以,参考一下官方文档,我们可以得到以下思路: 渲染前,要预先获取所有需要的异步数据,然后存到Vuex的store。 在后端渲染时,通过Vuex将获取到的数据注入到相应组件。...把store的数据设置到window.__INITIAL_STATE__属性浏览器环境,通过Vuex将window.__INITIAL_STATE__里面的数据注入到相应组件。...从这我们可以真正的看到,服务端渲染对于提升首屏的响应速度是很有作用的。 当然有的同学可能会问,服务端渲染获取初始ajax数据时,我们还延时了1s,在这个时间用户也是看不到页面的。...: 'source-map') 开发环境甚至部署过程热重载(通过读取更新后的 bundle,然后重新创建 renderer 实例) 关键 CSS(critical CSS) 注入使用 *.vue

20610

前端工程化与webpack

webpackHTML插件(类似于一个模板引擎插件) 可以通过此插件子定制index.html页面内容 webpack-dev-server webpack-dev-server可以让webpack...可以直接使用 / 表示项目根目录,后面跟上要访问的文件名称,即可访问内存的文件 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存bundle.js文件...html-webpack-plugin html-webpack-plugin 是 webpack HTML 插件,可以通过此插件自定制 index.html 页面内容。...,使htmlPlugin插件生效 } 解惑html-webpack-plugin 通过HTML插件复制到项目根目录的index.html页面,也被放到了内存 HTML插件在生成的index.html页面的底部...,自动注入了打包的bundle.js文件 devServer节点 webpack.config.js 配置文件,可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置

59620

Vue 07.webpack

运行npm i webpack-dev-server --save-dev安装到项目的开发依赖 package.json文件的scripts节点下新增"dev": "webpack-dev-server...终端执行npm run dev发现可以进行实时打包,但是dist目录下并没有生成bundle.js文件,这是因为webpack-dev-server将打包好的文件放在了内存bundle.js放在内存的好处是...: "dev": "webpack-dev-server --contentBase src" 同时修改index页面script的src属性为</script...html-webpack-plugin 这个插件的两个作用: 自动在内存根据指定页面生成一个内存的页面 自动把打包好的 bundle.js 追加到页面中去 由于使用--contentBase指令的过程比较繁琐...index.htmlscript标签注释掉,因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面 打包非 JS 文件 webpack默认只能打包处理

77620

进阶| Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇)

•Nodejs把html片段拼接到整个HTML上:这里跟客户端版本略有不同,上一篇文章,我们针对多页面生成了多个html,而这里因为有了Nodejs的动态输出能力,就没必要生成多个html了,只需要每次把动态部分拼接到模版...这个函数接受context参数,是vue-server-renderer传入的,往context塞数据,可以作用于最终生成的HTML,例如注入数据,这个稍后再说明。...这个是默认的行为,如果想要把各种js和css做特殊处理,或输出更多内容,可以参考手工注入: https://ssr.vuejs.org/zh/build-config.html#manual-asset-injection...state会被自动注入html,作为全局js变量__INITIAL_STATE__。 entry-client.js 最后client的代码,拿到这个全局对象,并赋值给Vue。。。...既然是多页面Nodejs,那肯定需要一个路由表。我们可以路由表配置访问url(express正则)和代码目录。

94520
领券