webpack中output配置项中chunkFilename属性的用法
chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多,都是用来将公共模块提取出来,但是用法不一样,这里主要介绍chunkFilename的使用
entry:{
main:__dirname + '/app/main.js',
index:__dirname + '/app/index.js'
},
output:{
path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
filename:'/js/[name].js', //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
/*
* chunkFilename用来打包require.ensure方法中引入的模块,如果该方法中没有引入任何模块则不会生成任何chunk块文件
* 比如在main.js文件中,require.ensure([],function(require){alert(11);}),这样不会打包块文件
* 只有这样才会打包生成块文件require.ensure([],function(require){alert(11);require('./greeter')})
* 或者这样require.ensure(['./greeter'],function(require){alert(11);})
* chunk的hash值只有在require.ensure中引入的模块发生变化,hash值才会改变
* 注意:对于不是在ensure方法中引入的模块,此属性不会生效,只能用CommonsChunkPlugin插件来提取
* */
chunkFilename:'js/[chunkhash:8].chunk.js'
},
如果开了web-dev-server服务器,当require.ensure方法中引入的模块发生变化,网站中加载的chunk.js文件的hash值会自动变化,而不需要手动重新打包或者重新运行web-dev-server。因为它会自动重新编译,但现有的chunk.js文件的hash并不会更新,只是网站中加载的chunk.js文件更新了。如图:
另外特别注意:如果某个文件只是引入了依赖的模块,却没有调用模块exports出来的方法,则该依赖模块里的代码不会执行,但网站还是会加载该chunk文件,如果exports的不是方法,而是其他类型的数据,则该依赖模块里的代码会执行。
webpack中output配置项中chunkFilename属性的用法的更多相关文章
- django 模型中 class Meta 内 各种属性的用法
Django 模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性.下面对此作一总结: abstract 这个属性是定义当前的模型类是不是一个抽象类.所谓抽象类是不会相应数据库表的 ...
- ajax配置项中的type与method
1. jQuery中ajax配置项中的使用type与method的区别本质上两个配置项是没有区别的,区别在于两者出现的时间不同,type对于目前jQuery的版本全部兼容,也就是说$.ajax({ t ...
- fileinput 配置项大全,从源码中翻出了很多属性,没那么多时间一一验证,特发出来给大家参考参考
fileinput 配置项大全,从源码中翻出了很多属性,没那么多时间一一验证,特发出来给大家参考参考 fileinput 配置项大全 option 属性名 属性类型 描述说明 默认值 language ...
- 【转】Webpack 快速上手(中)
由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出 ...
- 深入浅出的webpack构建工具---devTool中SourceMap模式详解(四)
阅读目录 一:什么是SourceMap? 二:理解webpack中的SourceMap的eval,inline,sourceMap,cheap,module 三:开发环境和线上环境如何选择source ...
- 透过现象看webpack处理css文件中图片路径转换的具体过程
webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...
- [转] .NET 3.5中MSChart组件的ImageLocation属性含义
在.NET程序/网站中如果要生成统计图表/图形,以前可以采用OWC(Office Web Components),如OfficeXP组件OWC10.Office2003组件OWC11.OWC采用COM ...
- HBase数据库配置中各配置项的释义及默认值
2018-11-26 16:09 2018-12-20 15:44 摘自HBASE官方网站 http://hbase.apache.org/book.html#_introduction 第7.2 ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
随机推荐
- iOS里常见的几种信息编码、加密方法简单总结
一.MD5 MD5编码是最常用的编码方法之一,是从一段字符串中通过相应特征生成一段32位的数字字母混合码. MD5主要特点是 不可逆,相同数据的MD5值肯定一样,不同数据的MD5值不一样(也不是绝对的 ...
- 深入浅出-iOS程序性能优化 (转载)
iOS应用是非常注重用户体验的,不光是要求界面设计合理美观,也要求各种UI的反应灵敏,我相信大家对那种一拖就卡卡卡的 TableView 应用没什么好印象. iOS应用是非常注重用户体验的,不光是要求 ...
- TCP/IP 协议难点之一—— IP分片
1 IP协议简单介绍 就个人而言,网络中,抛开网络安全加密这些,就只单单讨论协议本身,比较难的有三个地方: IP分片与重组 TCP滑动窗口与TCP状态的改变 TCP定时器 其实协议本身根据<TC ...
- 【原】ios的hitTest方法以及不规则区域内触摸事件处理方法
概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...
- OS开发UI篇—使用UItableview完成一个简单的QQ好友列表
本文转自:http://www.cnblogs.com/wendingding/p/3763330.html 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableVi ...
- Sublime Text插件:HTML-CSS-JS Prettify
该插件依赖到nodejs环境 1.安装 在Sublime Text中,按下Ctrl+Shift+P调出命令面板; 输入install 调出 Install Package 选项并回车; 输入prett ...
- SVN安装使用小结
SVN在实际的项目开发中有很广泛的用途.一开始接触SVN(Subversion),思路并不清楚,现在总算理清了. 声明:本文并不是系统地对SVN做介绍,而是笔者的使用总结,个人认为的一些要点,可能对初 ...
- C#处理猜拳问题(非窗体)
//猜拳,5局3胜,要求使用公用变量. namespace 结构体复习_公用变量 { class Program {public int rz=0; public int dz = 0; public ...
- mysql-mmm 安装配置(双主)
原文地址:mysql-mmm 安装配置 作者:chinaunix1116 MMM即Master-Master Replication Managerfor MySQL(mysql主主复制管理器)关于m ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...