请熟悉gulp或者webpack打包工具的大虾帮忙

Question

最近中途接手了一个项目，文件结构非常传统简单，就是html，css，js各一个文件夹，一共有80个html页面，每个页面都是通过传统的style和script标签引入需要的若干个css和js文件。
现在页面都完成了，为了优化代码和网络，想用gulp或者webpack打包项目，本人对这两个工具只是了解一些，会用gulp做一些代码压缩和合并，我的思路大致有2种：

1. 将js目录下所有的js文件压缩并合并成一个js文件，css文件夹下的css都合并成一个css文件，然后每个页面都只引入这2个合并后的文件，因为之前没做过类似的事情，我想这样做肯定会在加载首页的时候非常慢，而且每个html页面都要重新修改它们导入的文件的路径和文件名，是不是这样做非常不现实？

2. 将每个页面需要的所有的css和js分别打包成一个css和js文件仅供这个html页面使用，这样就会有80个css文件和80个js文件，这样做的问题在于，因为这些页面中肯定会有重复引用的文件，比如jquery.js, common.js这类的文件，这样打包肯定会浪费很多空间。

我想不出还有其他什么方法，请熟悉的大虾帮忙看看，你们实际运用中碰到这样的情况是如何处理的？

Answer 1

当然是第二种，至于你说的重复引用的问题，这正是webpack的范畴哇，请参考这篇文章[《
webpack多页应用架构系列（三）：怎么打包公共代码才能避免重复？》](https://segmentfault.com/a/11...