我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Webpack原理与实战之如何使用DevServer提升你的开发效率?

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Webpack原理与实战之如何使用DevServer提升你的开发效率?

  • 必须能够使用HTTP服务运行而不是以文件形式预览。这样可以更加接近生产环境状态,而且项目中可能需要使用ajax类的api,以文件访问会产生诸多问题
  • 在我们修改代码后,webpack能够实现自动完成构建,然后浏览器可以即时显示最新的运行结果,这样可以减少开发过程中额外的重复操作,同时可以让我们更加专注,效率得到提升
  • 需要能够提供Source Map支持。这样,运行过程中出现的错误可以快速定位到源代码中的位置,而不是打包后结果中的位置,更便于我们快速定位错误、调试应用

Webpack自动编译

关于webpack自动编译可以完全符合以上要求,具体的用法是:启动webpack时,添加一个--watch的cli参数,webpack就会以监视模式启动运行,打包完成后cli不会立即退出,而是等待文件变化再次工作,知道我们手动结束它或出现不可控的异常。

  1. # 我们可以先npm 全局安装browser-sync模块,然后使用这个模块 
  2. $ npm i browser-sync -g 
  3. $ browser-sync dist --watch 
  4.  
  5. #或者使用npx直接使用远端模块 
  6. $ npx browser-sync dist --watch 

我们看到运行终端后的显示:

  1. npx browser-sync dist --watch 
  2. [Browsersync] Access URLs: 
  3.  --------------------------------------- 
  4.        Local: http://localhost:3000 
  5.     External: http://192.168.99.161:3000 
  6.  --------------------------------------- 
  7.           UI: http://localhost:3001 
  8.  UI External: http://localhost:3001 

我们看到这种webpack+browser-sync模式虽然实现了我们的需求,但是方法有很多的弊端:

  • 操作繁琐,我们需要同时使用两个工具,需要了解内容更多、学习成本提高
  • 效率低下,因为整个过程中webpack会将文件写入磁盘,browser-sync再进行读取,过程会设计到大量磁盘读写操作,导效率低下

对此,webpack官方推出了开发工具,能够提供一个开发服务器,并且自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在一起。推出初衷就是为了提高开发者日常的开发效率,使用这个工具就可以解决前面的问题。

  1. $ npm i webpack-dev-server -D 
  2. $ npx webpack-dev-server 

运行webpack-dev-server命令时,wbepack内部会自动启动http-server服务,为我们生成的静态文件提供server服务,并且为我们生成的文件提供打包服务。其工作流程大概是:

  • 执行webpack-dev-server命令
  • 启动http服务
  • webpack构建
  • 监视文件变化,有变化则进入新一轮webpack构建

要注意的是,webpack-dev-server为了提升打包效率,并未将文件写入磁盘中,而是将文件暂存到内存中,再通过http-server进行获取文件,减少了不必要的磁盘读写操作。

静态资源访问

webpack-dev-server会默认将构建结果和输出文件全部作为开发服务器的资源文件,只要通过webpack打包能够输出的文件就可以直接被访问使用。

在实际使用webpack时,一般会将copy-webpack-plugin这种插件留在上线前的那次打包使用,而在开发过程中一般不会使用。因为在开发过程中,我们会频繁执行打包任务,假设此目录文件需要拷贝的文件比较多、比较大,如果我们每次构建都需要执行插件的话,那么打包的开销就会比较大,构建速度会下降。

在实际生产环境中能够直接访问的api,回到开发环境后哦,再次访问这些api就会产生跨域请求问题。当然我们可以使用cors,但是必须后端支持。

为了解决这种开发阶段跨域请求问题最好的方法,就是在开发服务器中配置一个后端api的代理服务,把后端接口服务代理到本地的开发服务地址。我们可以添加pathRewrite属性来实现代理路径重写,重写规则就是把路径开头的/api替换为空。这样当我们请求代理接口http://localhost:9000/api/users就会代理请求目标接口http://api.github.com/users。

  1. devServer:{ 
  2.   proxy:{ 
  3.     "/api":{ 
  4.       target:"http://api.github.com"
  5.       pathRewrite:{ 
  6.         "^/api":""//替换掉代理地址中的/api 
  7.       } 
  8.     } 
  9.   }, 
  10.   contentBase:path.join(__dirname,"dist"), 
  11.   compress:true
  12.   port:9000 

参考文章

《webpack原理与实践》

《webpack中文文档》

写在最后

本文主要说明了如何配置DevServer提升我们的本地开发效率,其实就是使用了webpack的代理模式,在请求目标接口时通过本地代理请求,能够避免开发阶段的跨域问题。

 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Webpack原理与实战之如何使用DevServer提升你的开发效率?

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Webpack原理与实战之如何使用DevServer提升你的开发效率?

我们知道在开发中需要先将源代码进行打包后,再进行运行而后在浏览器打开,每次修改都要遵循这个步骤。那么,有没有什么方法可以省略这么多的繁琐步骤呢?

项目实战:如何运用CSS预处理器提升开发效率的经验总结

项目实战:如何运用CSS预处理器提升开发效率的经验总结如今,网站和应用的开发离不开CSS(层叠样式表),它为页面的样式和布局提供了一种强大的控制方式。然而,纯CSS编写大型项目的样式往往会面临一系列问题,例如复杂度高、维护困难、代码冗余等。
项目实战:如何运用CSS预处理器提升开发效率的经验总结
2023-11-04

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录