webpack学习(三)html-webpack-plugin插件

一、html-webpack-plugin插件

简单创建 HTML 文件,用于服务器访问

例如:我们要为输出文件添加哈希值标记,避免老的不变的文件重新加载,避免新修改的文件受缓存影响。

在前后两次在终端输入webpack打包时,即使component中的所有文件都没有变化,资源是要重新加载一遍的。
同理,在生产中,每次需要在代码中更新内容时, 服务器都必须重新部署,然后再由所有客户端重新下载。
而通过网络获取资源可能会很慢,那么我们怎么才能避免这个问题呢———给output中的bundle文件提供hash值标记:
 
每次构建输出文件时,如果代码发生变化,输出的文件将生成不同的hash值,这时将重新加载资源,但如果代码无变化,输出文件hash值也不变化,系统就会默认使用原来缓存的输出文件。
 
而写入hash值带来的新问题——每次都要更改dist/index.html中JS的src
因为我们生成的hash是不断变化的,与此同时index.html必须不断更改

你可能感兴趣的:(webpack学习(三)html-webpack-plugin插件)