Webpack等打包工具是怎么实现启动本地服务器,并且实时预览并更新的

已于 2024-06-10 18:49:49 修改
阅读量341 收藏
点赞数 8
文章标签： webpack 前端 node.js
于 2024-06-10 18:16:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74545388/article/details/139579903
版权

在代码中使用webpack来作为构建工具,使用npm run server也就是webpack server的时候,会启动一个开发服务器,会运行类似于打包的行为(在这里我们比喻成打包),转换成可以直接运行的代码,这写代码不会生成文件,而是会运行在内存中,然后webpack会给你一个本地的地址,可以直接在浏览器中访问,比如localhost:3000等等,当你访问到这个地址的时候,浏览器会请求开发服务器(也叫做 dev server),webpack使用的库是webpack-dev-server,在这个库里面使用了express,启动的服务器,然后开发服务器会请内存之前打包过可以直接运行的代码,然后返还给浏览器运行

而实时更新是当我们的代码发生变化,webpack帮我们在打包一次,浏览器是怎么知道我们更改了代码呢?这时webpack就会用到websocket来进行通知浏览器我们代码发生变化了,重新运行新的代码,在运行在重新运行时,更新分为两种模式,第一种是吧浏览器真正的刷新一遍,第二种是热更新(HMR)

码农的救赎
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack打包Ts简易搭建
06-29
- `npm run dev` 命令通常启动一个开发服务器，如Webpack Dev Server，它会在内存中构建项目并提供热重载功能，方便开发过程中快速预览和调试。 6. **项目结构**： - `package.json`: 项目的核心配置文件，包含了...
webpack1-打包流程
01-20
如果在开发过程中，你可以通过`dev`脚本来启动Webpack的开发服务器，实现快速的代码热替换和实时预览。 总的来说，Webpack 1的打包流程主要包括初始化项目、配置Webpack、安装和使用Webpack CLI、引入和打包第三方...
webpack dist 打包后预览
qq_38552198的博客
06-01 411
根目录下serve.js文件,没有可新建 const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const proxy = require("http-proxy-middleware").createProxyMiddleware; const app = express(); con.
webpack系列之配置 html-webpack-plugin 生成预览页面
老__L的博客
12-15 202
配置 html-webpack-plugin 生成预览页面
webpack（四）本地服务器环境配置
音韵者天
08-04 7891
配置内置环境启动webpack内置环境以后每次修改都会自动打包，在这一步将配置浏览器的自动刷新，让其更加自动化。 修改package.json 的 scripts 部分 { "scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval --progress --colors --hot --c
webpack预览页面配置
qq_40666120的博客
05-15 636
应用场景：当我们配置了webpack自动打包工具后，通过 http://localhost:8080/ 访问到的是文件夹根目录，而没有直接打开html页面，如果要打开html页面需要在界面中点击指定的html页面才行。所以在这儿就用到webpack预览页面配置，直接把要在浏览器中访问的页面放在在根目录内存中。 在这里我使用VScode编辑器 在vscode中要停止自动打包，使用ctrl+c快捷键，选择 Y 接口停止自动打包功能 第一步：vscode终端，在项目根目录中运行 npm install html
webpack打包项目如何实现github预览
张木期的博客
06-06 903
最近在用Vue写了一个项目用来webpack打包后，想要上传到github，并通过Github pages预览，在这个过程中遇到了一些问题，因此写个笔记，以便查阅 完成Vue项目以后，在上传到github之前，需要修改一些配置才能通过github pages预览项目。 一、修改配置 解决文件路径问题： 打开项目根目录config文件夹下的index.js文件，进行如下修改： 看清楚是 build...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
12-12
Webpack 是一款强大的模块打包...总之，Webpack 打包 Vue 项目后生成的 `dist` 文件需要部署到服务器才能正确运行，通过结合 Express.js 可以快速搭建一个简单的服务器环境，实现打包后 Vue 项目的本地预览或线上部署。
【webpack_01配置】手把手从0开始启动、打包html和js文件（最简版）
04-05
它将项目中的各种资源（如JavaScript、CSS、图片等）视为“模块”，并将它们转换并打包到一个或多个可部署的静态资源文件中。在本教程中，我们将一步步学习如何配置Webpack来处理HTML和JS文件，构建一个最简单的前端...
Vue-cli打包后如何本地查看的操作
10-14
然而，为了在本地环境中预览打包后的应用，我们需要模拟一个 HTTP 服务器环境，因为现代浏览器出于安全考虑，不允许直接从文件系统加载 JavaScript、CSS 等资源。 **Vue CLI 打包流程** 1. 在终端中进入你的 Vue.js...
使用webpack打包vue项目,无法自动在浏览器中打开,情况总结
Moreisy的小镇
07-05 3317
最近用vue-cil快速构建vue项目的时候,发现他默认的是无法在浏览器的窗口中打开的,很不方便.当你运行 npm run dev 的时候窗口会显示I  Your application is running here: http://localhost:8080这段话的意思是：你的程序运行地址是:http://localhost:8080于是总结了一下浏览器默认打开的设置方法.其实归根结底就是一...
05_黑技能-实时打包
weixin_44247693的博客
10-22 123
目标 能使用webpack实现实时打包预览效果 webpack实时打包 目标：实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。 工具：[webpack-dev-server] npm官网 配置手册 注意： 项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件 现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果 步骤： 安装 npm i webpack-dev-server -D -----------------
前端面试之webpack篇
weixin_33982670的博客
09-27 1333
还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面试你一般问你webpack的原理，Loader的原理，你有用那些优化措施要是觉得对你有所帮助，请帮我点一个stargithub.com/skychenbo前端开发已经模块化，它改进了代码库的封装和结构。打包工具已经...
webpack4配置之——20：发布并预览测试及生产环境
kevin的博客
03-21 734
发布测试及生产环境 一个项目从开发到测试到上线，这个过程的三个阶段，需要三个环境的代码,也就需要三套webpack配置文件 开发环境(webpack.dev.conf.js)：怎么方便怎么来~，想怎么配置就怎么配置； 测试环境(webpack.test.conf.js)：测试环境的配置与生产环境要一致，以达到在测试环境还原生产环境BUG的目的，其与生产环境不同之处在于，测试环境打包可以不用压缩，...
webpack:配置html-webpack-plugin生成预览页面
qq_42767647的博客
07-07 291
未配置该插件之前，一开始打开的是如下页面： 该插件的作用就是，一打开就是HTML页面，安装插件的方法： 1.安装插件 npm install html-webpack-plugin -D 2.修改webpack.config.js文件的头部区域，添加以下信息： 3.修改webpack.config.js文件中向外导出配置对象，如下： 4.运行 打开页面后，就是刚刚设的那个页面，如我设的是index.html页面，打开就是我所设的index.html页面，而不是有文件夹那个页面： ...
webpack (一) 浏览器中显示hello world
飞天代码的博客
06-30 2558
nodejs也安装了， babel编译es5也学了，目前就差使用webpack来如何在现有的浏览器中查看一个简单功能。 自然伟大的hello world 又要粉墨登场咯 第一步采用webstorm新建项目，具体细节不写了，如果还不会的可以查看我写的另外一篇博客：新建项目项目结构如下 第二步：webpack.config.js添加到项目中 由于没有找到啥法子自动创建该文件 我是手动创建的，并将
性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具）
热门推荐
White feathe 的博客
11-16 3万+
查看 webpack 打包后所有组件与组件间的依赖关系，针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改，本次采用的是 ==webpack-bundle-analyzer==（可视化视图查看器）== 介绍1：webpack-bundle-analyzer（可视化）==将捆绑内容表示为方便的交互式可缩放树形图如下效果图：模块功能： 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大
webpack 打包后的bundle分析
lzc的博客
11-21 4286
webpack打包后的bundle文件：app.bundle.js里面其实就是个立即执行函数，类似如下结构： (function (modules){ console.log(modules['app']) }) ({ 'app': function(){ return 20 }, 'test': function(){ re...
webpack打包vue项目之后生成的dist文件本地运行
最新发布
09-02
在使用webpack打包vue项目后生成的dist文件，我们可以通过以下步骤在本地运行： 1. 首先，我们需要将dist文件夹复制到我们项目的根目录下。假设我们的项目名为"my-project"，现在我们的项目目录结构如下： ``` my-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值