webpack多页面开发与懒加载hash解决方案

之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景，如果是常规单页面应用的话，上篇文章提供的方案是没有问题的。但是前端项目复杂多变，应对复杂多页面项目时，我们不得不继续踩webpack的hash坑。

在进入正文之前先解释一下所谓的常规单页面和复杂多页面是什么意思。

这两个并非专业术语，而是笔者实在想不出更恰当的说法了，见谅。

1. 项目类型

1.1 常规单页面项目

常规单页面符合以下条件：

• 可以存在多个主js文件和css文件；
• 每个js文件都是同步打包的，也就是说不存在与主文件相关联的懒加载文件。

与主文件关联的懒加载文件指的是逻辑与主文件完全无关的js文件，这类文件不参与主文件打包。比如主文件main.js中有以下代码：

window.onload = function(){ var script = document.createElement('script');
    script.src = '//static.daojia.com/bi.js'; document.head.appendChild(script);
}

其中bi.js的内部逻辑与main.js为任何关联，它对于main.js来说就是一个字符串而已。

与之相对应的是与主文件有逻辑关系的模块文件，比如以下代码：

window.onload = function(){ require.ensure([],function
        		
延伸阅读
        		

        			
        			
ssh框架
        			2016-09-30
        			
        			
        			
        			
阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
        			2017-07-26
        			
        			
        			
        			
消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
        			2024-03-26
        			
        			
        			
        			
Selective Search for Object Recognition 论文笔记【图片目标分割】
        			2017-07-26
        			
        			
        			
        			
词向量-LRWE模型-更好地识别反义词同义词
        			2017-07-26
        			
        			
        			
        			
从栈不平衡问题 理解 calling convention
        			2017-07-26
        			
        			
        			
        			
php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
        			2017-07-26
        			
        			
        			
        			
Swift实现JSON转Model - HandyJSON使用讲解
        			2017-07-26
        			
        			
        			
        			
阿里移动安全 Android端恶意锁屏勒索应用分析
        			2017-07-26
        			
        			
        			
        			
集合结合数据结构来看看(二)
        			2017-07-26
        			
        			
        			
        		
        		
        		学习是年轻人改变自己的最好方式