webpack@3.6.0(4) -- 配置模块化开发
本篇内容
- watch
- 版权插件
- hash、chunkhash、contenthash的区别
watch
修改文件时自动打包
webpack --watch//webpack.config.js,与devServer同级
watchOptions:{poll:1000, //检测修改时间,毫秒为单位aggregateTimeout:500, //ctrl+s的时间间隔最小单位,超出时才打包ignored:/node_modules/, //不监测哪个}
版权插件
webpack自带的插件
const webpack=require('webpack');
new webpack.BannerPlugin('adoctors版权所有,如有问题请联系qkeliang@163.com')
hash、chunkhash、contenthash的区别
hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。
如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。
但是在实际使用的时候,这几种hash计算还是有一定区别。
举个例子:项目结构很简单,入口文件index.js,引用了index.css。然后新建了jquery.js和test.js作为公共库。
hash
hash是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的hash值都会更改,并且全部文件都共用相同的hash值,即同一次构建过程中生成的哈希都是一样的。
chunkhash
采用hash计算的话,每一次构建后生成的哈希值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要换另一种哈希值计算方式,即chunkhash。
chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。
这样子就保证了在线上构建的时候只要文件内容没有更改就不会重复构建。
contenthash
在chunkhash的例子,我们可以看到由于index.css被index.js引用了,所以共用相同的chunkhash值。
但是这样子有个问题,如果index.js更改了代码,css文件就算内容没有任何改变,由于是该模块发生了改变,导致css文件会重复构建。
这个时候,我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。
转载于:https://www.cnblogs.com/adoctors/p/9055504.html
webpack@3.6.0(4) -- 配置模块化开发相关推荐
- 【模块化开发】之 Webpack、Rollup、Parcel
项目说明 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 模块化打包工具解决的是前端整体的模块化,并不单指 JavaScript 模块化. 产生原因 ES Mod ...
- 模块化开发工具webpack
1.模块化开发概述 前端的js代码如何复用,怎样避免多文件之间的命名冲突,前端开发中这之类的问题如何解决,答案是模块化开发.来看看模块化开发的好处吧 创建common公共模块a.js文件 var na ...
- 蚂蚁金服 SOFAArk 0.6.0 新特性介绍 | 模块化开发容器...
SOFAStack Scalable Open Financial Architecture Stack 是蚂蚁金服自主研发的金融级分布式架构,包含了构建金融级云原生架构所需的各个组件,是在金融场景里 ...
- html手机模块化,jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- WSE3.0构建Web服务安全(3):WSE3.0策略配置、证书、签名、与实例开发
继WSE3.0构建Web服务安全(1):WSE3.0安全机制与实例开发和WSE3.0构建Web服务安全(2):非对称加密.公钥.密钥.证书.签名的区别和联系以及X.509 证书的获得和管理之后,今天我 ...
- 模块化开发seajs 配置和简单调用
模块化开发工具 seajs seajs 提供了简单.极致的模块化开发体验 seajs官网 :http://seajs.org 下面是seajs的小实例 b.js文件调用 a.js文件中的属性方法 se ...
- VS2008中开发Silverlight 2.0的配置
最近开始学Silverlight,还真是万事开头难,配置个开发环境弄了半天-到不是有多难,就是要下载太花时间了...(以下是用2.0版本说明) 安装Silverlight 2.0 的浏览器插件,用于播 ...
- webpack配置vue开发环境
首先,你要完成了下面几点: 配置css 配置js 配置图片文件 配置html-webpack-plugin(可选) 然后安装vue需要的包 npm install vue vue-loader vue ...
- Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
想利用暑假时间好好学习一下vue,会记录每一天的学习内容. 今天是学习vue的第6天! 起起伏伏乃人生常态,继续加油- 学习内容 1. 插槽slot slot基本使用 具名插槽slot 2. 编译作用 ...
- 大数据开发系列(六)----Hive3.0.0安装配置以及Mysql5.7安装配置
一.Hive3.0.0安装配置: (Hive3.1.2有BUG)hadoop3.1.2 Hive各个版本下载地址: http://archive.apache.org/dist/hive/,这里 ...
最新文章
- How to enable mod_rewrite on Apache?
- 嵌入式驱动程序之信号量
- UNIX中的文件和目录
- C#微信公众平台开发—高级群发接口
- TF之VGG系列:利用预先编制好的脚本data_convert .py文件将图片格式转换为tfrecord 格式
- 先进pid控制matlab仿真程序,先进PID控制Matlab仿真第4版-仿真程序-上交
- 【MFC】Windows窗口样式
- Android开发之关于transformDexArchiveWithExternalLibsDexMergerForDebug java.lang.OutOfMemoryError问题的参考解决方案
- 阿里巴巴开源 Sentinel,进一步完善 Dubbo 生态
- 解决“Pip - Fatal error in launcher: Unable to create process using... ”
- x86 android 显卡 tablet2,Re: android4.4.2将tablet更改为phone
- vue中分割线的实现
- 50个程序员必须知道的网站,你知道么
- 基于stm32单片机的物联网WiFi智能快递柜设计
- 利用Python库中的imageio生成GIF格式的动图
- zb怎么做渲染图_zbrush高模效果图渲染技巧
- mac 更新hosts文件使其生效
- 【福利】免费领取企业信息查询两年VIP会员
- 百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度...
- 计算机关于剪贴板的知识,复制、剪切、粘贴与剪贴板、内存的关系