本篇内容

  • 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文件内容不变,那么不会重复构建。

webpack@3.6.0(4) -- 配置模块化开发的更多相关文章

  1. web4.0基本配置

    const path = require('path');//引入路径包 const HWP = require('html-webpack-plugin');//引入自动产出html包 const ...

  2. [JavaWeb]SpringSecurity-OAuth2.0 统一认证、资源分离的配置,用于分布式架构、模块化开发的认证体系

    前言 关于 OAuth2.0的认证体系,翻阅了好多资料,RCF 文档太多,看了一半就看不下去了,毕竟全英文的文档看起来,是有一点让我烦躁,但也对 OAuth2.0的认证流程有了一个基本的概念,之前用 ...

  3. 记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)

    写本记时(2018-06-25)的各版本 "webpack": "^4.6.0"  //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...

  4. 移动端拖拽(模块化开发,触摸事件,webpack)

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  5. 前端模块化开发篇之grunt&webpack篇

    几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...

  6. 【翻译】Webpack 4 从0配置到生产模式

    查看原文 webpack 4 发布了! webpack 4 作为一个零配置的模块打包器 webpack 是强大的并且有许多独一无二的特点但是有一个痛点就是配置文件. 在中型到大型项目中为webpack ...

  7. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

  8. webpack初体验之模块化开发

    写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...

  9. webpack入门级 - 从0开始搭建单页项目配置

    前言 webpack 作为前端最知名的打包工具,能够把散落的模块打包成一个完整的应用,大多数的知名框架 cli 都是基于 webpack 来编写.这些 cli 为使用者预设好各种处理配置,使用多了就会 ...

随机推荐

  1. cocos2d-x 3.9 android studio项目命令行打包

    进入创建的项目的 proj.android-studio目录 cocos run/compile -p android --android-studio 这样就可以打包了

  2. Native App vs Web App 以及 Hybrid App的实现原理

    移动应用基本的三种类型 1)  Native 应用程序 2)  Web 应用程序 3)  混合应用程序(Hybrid: Native应用和web应用结合) Native 应用 直接运行在电脑上或者智能 ...

  3. java:练习学校学生

    java:练习学校学生 一个学生对应一个学校 一个学校对应多个学生 Student类,School类,Demo测试类 Student: public class Student { private S ...

  4. 在Win8.1系统下如何安装运行SQL Server 2005

    按正常情况,在Win8/Win8.1系统下安装微软的SQL Server 2005套件会存在兼容问题,即使安装完,最后的结果就是导致其服务项无法正常启动. 如果用户创建使用的项目非要按照SQL Ser ...

  5. jQuery 对表单、表格的操作及更多应用-简略笔记

    [jQuery 对表单.表格的操作及更多应用] jquery对表单及表格的操作是实际应用中相当广泛. 对于表单的操作,可以实现 (1)获取和失去焦点改变样式: (2)在多行文本框中可以实现网站评论框的 ...

  6. python map函数 reduce函数

    Python中map()函数浅析 函数式编程: 更好的描述问题 map函数 怎么理解当传入多个参数list时,map如何运作:    abc函数第一次传入的数据时 (11,44,77),然后(22,5 ...

  7. 2017-2018-1 20179203 《Linux内核原理与分析》第四周作业

    攥写人:李鹏举 学号:20179203 ( 原创作品转载请注明出处) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/US ...

  8. 【LeetCode】137. Single Number II

    题目: Given an array of integers, every element appears three times except for one. Find that single o ...

  9. bzoj 1023 [SHOI2008]cactus仙人掌图 ( poj 3567 Cactus Reloaded )——仙人掌直径模板

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1023 http://poj.org/problem?id=3567 因为lyd在讲课,所以有 ...

  10. 记一次肉机事件--yam

    背景: 研发同事反应他自己的测试机器,有一个yum程序占用cpu很多,接近100%,然后他就将这个程序kill了.我一看他给我发的截图,原来不是“yum”,而是“yam”,第一反应就是让人当肉机了.上 ...