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
        		
网友评论