接上一篇《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