本文详细介绍了如何使用webpack结合HtmlWebpackPlugin插件优化Vue项目的打包过程，包括动态添加script标签、解决缓存问题、处理多个入口文件和模板。通过动态配置，实现了多页面项目的自动化打包，降低了手动维护的工作量。
接上一篇《webpack 之vue 初级打包1 》
到目前位置vue第一个页面已经可以正常运行了，其中还有一些地方可以更加方便快捷。期待更加智能更加快速。依据webpack给出到原则一切皆模块，上文我们只是针对js做了打包，现在期望html也打包，图片、css 也做打包模块处理。
优化内容
- 动态添引入script 加载js，并且指定到头部或者底部
- 优化缓存问题加入hash 值
- 动态生成html入口文件，一个或者N个
上文中在编译打包好js、vue之后，还需要手动在html里面加入js到引入地址：
<div id="app"></div>
<script src="./dist/build.js"></script>
先来优化这一步，动态加入script标签，webpack本身提供很多功能，并且提供了强大到插件功能，只需要在 plugins里面配置就可以。这里动态加入script 推荐HtmlWebpackPlugin，差不多可以优化今天到需求
HtmlWebpackPlugin 插件
这个插件很强大几乎完成了。需要优化的全部功能，一步一步来。
安装
npm i -D html-webpack-plugin
使用配置，打开 webpack.config.js 导入插件，然后找到plugins 的webpack选项，如果没有就手动加上去。
const HtmlWebpackPlugin = require('html-webpack-plugin');
在plugins 直接使用看看会有什么效果
plugins:[
new VueLoaderPlugin(), // vue 插件
new HtmlWebpackPlugin() //
]
直接运行
npm run dev
在更目录下发现了了dist文件荚里面包含build.js 这是是在webpack配置打包输出文件，书写的；同时有一个文件index.html 这个文件就是 HtmlWebpackPlugin 默认生成的入口html文件，打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1"></head>
<body>
<script src="build.js"></script></body>
</html>
注意观察，自动加入了js 文件，这个意味着，不在需要手动在html加入script标签引入外部js，但是html，不想用自动生成的，需要自己的html为入口，修改html-webpack-plugin参数
template:‘模版路径，可以任意你喜欢的模板，可以是 html, jade, ejs, hbs’
new HtmlWebpackPlugin({
template:'index.html'
})
因为我的index.html 文件在根目录下因此直接些就行，如果在其他地方需要输入完整路径；
现在看一下结果，打开dist/index.html 发现 已经是我们写好的html文件、同时js也已经动态加载上去了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>木子聊前端</title></title>
<meta name="d
最低0.47元/天 解锁文章
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
