本篇文章主要介绍了详解webpack自动生成页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一 背景 最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。 二 插件介绍 打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到head标签里。另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output

在项目中我们会不断的添加，优化代码，每次添加优化之后都需要打包进行再次上传更新。这时问题就回来了，每次打包出来js,css文件的名字都是一样的，在首页index.html的引用也不会变，这样老用户在访问这个页面时看到就会是浏览器缓存的版本，而不是最新的版本，想要看到最新版本还要进行清缓存，强制刷新，这显然是不可能的，那我们要如何解决这个问题呢？ 首先有同学可能想到每次打包之后我改一下打包出来文件的名字，然后在首页index,html里面把引用代码里的文件名字也改掉就可以了，这种方法是可以的，但是