专栏首页wfaceboss(20/24) webpack实战技巧:watch实现热打包和添加代码备注

(20/24) webpack实战技巧:watch实现热打包和添加代码备注

在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要实时进行打包以确保团队间能进行联调或者进行相关代码的合并工作时,每次保存后手动打包显然效率太低,我们需要的是代码发生变化后,只要保存,webpack自动为我们进行打包。这就得谈到本节中说到的watch工具了。

 因为watch是webpack自带的插件,所以我们只需要配置就行了。

1.直接进行使用

1.1  修改我们的package.json

在打包指令中添加--watch。

"scripts": {
    "server": "webpack-dev-server --open",
    "dev": "set type=dev&webpack --watch",
    "build": "set type=build&webpack --wathc",
  },

1.2 运行指令

比如运行npm run dev 进行开发打包。

npm run dev

 此时终端结尾如下:

1.3  修改src/index.html文件代码

新增内容:

<div>watch</div>

1.4 保存(ctrl+S)

 保存后我们会发现,终端底部信息为:(修该过的文件信息)

 此时我的打包的文件中就会自动新增该部分内容。

到此我们会觉得这个已经够了,能够实现我们的要求了,但是有时候直接用 –watch是不起作用的,这时候我们需要在webpack.conffig.js文件中进行一些选项的配置。

配置信息如下:

2. 配置后使用

watchOptions:{
    //检测修改的时间,以毫秒为单位
    poll:1000, 
    //防止重复保存(ctrl+S)而发生重复编译错误。这里设置的500是半秒内重复保存,不进行打包操作
    aggregateTimeout:500, 
    //不监听的目录
    ignored:/node_modules/, 
}
poll:1000:以1000毫秒检测一次,判断是否修改过代码。
aggregateTimeout:500:表示在500毫秒内多次保存,只算一次。

ignored:/node_modules/,  表示不用检测的node_modules文件

配置好后,我们就可以实现热打包了,而不用反复的手动打包了,从而加快开发效率。

3.添加代码备注

 在工作中每个人写的代码都要写上备注,用于区分某部分代码的编写人。

这个插件就是BannerPlugin,会自动给我们添加我们指定的相关注释。

3.1 引入

在webpack.config.js头部引入文件:

const webpack = require('webpack');

3.2 配置

在webpack.config.js文件的plugins属性中进行配置:

new webpack.BannerPlugin('wfaceboss编写')

重新打包这时在dist目录下的entery.js已经加上了相关注释。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (1/24) 认识webpack

    (1)webpack是一个模块打包工具,它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Typ...

    wfaceboss
  • 省市县,区的查询(通过区开始)(导出的接口实现)

    wfaceboss
  • c# 框架学习(nop )总结-------编辑功能

    wfaceboss
  • 【资源】Python实现多种模型(Naive Bayes, SVM, CNN, LSTM, etc)用于推文情感分析

    【导读】近日,Abdul Fatir 在自己的CS5228课程报告使用不同的方法进行Tweets情感分析(作为二分类问题),并对这些方法的性能进行比较,主要是基...

    WZEARW
  • Python如何实现24个微信大群万人同步转发直播?

    最近猪哥感觉不能再拖了,所以就考虑自己开发一个多群直播项目,使用原来我们做的微信机器人项目。

    AI科技大本营
  • 国密SSL协议之Nginx集成

    Nginx自身支持标准的SSL协议,但并不支持国密SSL协议。本文描述了Nginx配置的国密SSL协议(单向)的完整过程,仅供学习和参考之用。

    gmssl
  • 手把手教你利用Jenkins持续集成iOS项目

    众所周知,现在App的竞争已经到了用户体验为王,质量为上的白热化阶段。用户们都是很挑剔的。如果一个公司的推广团队好不容易砸了重金推广了一个APP,好不容易有了一...

    一缕殇流化隐半边冰霜
  • 深圳十家本土机器人企业联手打造首条手机自动化生产线

    随着工业4.0时代的到来,智能制造已经成为了“朝阳产业”,在深圳市机器人产业发展白皮书中显示,3C行业已成为目前机器人应用的重要领域。然而,由于3C产业拥有生命...

    机器人网
  • 手把手教你利用Jenkins持续集成iOS项目

    DevOps时代
  • 爬虫系列(1)-----python爬取猫眼电影top100榜

    对于Python初学者来说,爬虫技能是应该是最好入门,也是最能够有让自己有成就感的,今天在整理代码时,整理了一下之前自己学习爬虫的一些代码,今天先上一个简单的例...

    Niucas_Mao

扫码关注云+社区

领取腾讯云代金券