到目前为止，有关Webpack最基础的内容差不多已经讲完了，其中包括Webpack运行的基本流程、CSS的打包和图片的打包，也就是说，当你掌握这几节之后，基本上就能像以前不用Webpack时一样愉快地写代码了。
当然，我们其实还有很多需要优化的地方，就比如本文所要讲到的，如何将HTML进行打包？
在之前的实例中，Webpack虽然能够正常地将各种页面所需要的资源从src目录打包至dist目录，但是我们在最后必须在dist目录中手动去创建HTML页面，并引入这些打包后的资源。
事实上，Webpack能够自动的帮助我们完成这件事，只需要使用html-webpack-plugin插件即可。
1. 安装html-webpack-plugin插件
与安装loader一样，命令行输入以下命令回车即可。
npm i -D html-webpack-plugin
2. webpack.config.js中添加相关配置
const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin插件module.exports = { entry: './src/scripts/index.js', // 打包入口
output: { path: __dirname + '/dist', // 输出路径
filename: 'scripts/index.js' // 输出文件名
}, module: { rules: [ // 其中包含各种loader的使用规则
{ test: /\.css$/, // 正则表达式，表示打包.css后缀的文件
use: ['style-loader','css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
},
{ // 图片打包
test: /\.(png|jpg|gif|svg)$/, loader: 'url-loader', options: { name: './images/[name].[ext]', limit: 8192
}
}
]
}, plugins: [ // 打包需要的各种插件
new htmlWebpackPlugin({ // 打包HTML
template: './src/index.html' // HTML模板路径
})
], watch: true // 监听文件改动并自动打包};3. 添加HTML模板文件
HTML模板文件如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Hello Webpack</title></head><body></body></html>
是的，除了HTML本身，其他资源如CSS、图片等均无需手动添加，在打包结束后，所有资源均会自动添加至HTML文件相应位置并进入dist目录。
4. 打包结束
打包后的index.html文件如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Hello Webpack</title></head><body><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts/index.js"></script></body></html>
本文重点总结
打包HTML，使用 html-webpack-plugin 插件即可
作者：前端王睿
链接：https://www.jianshu.com/p/3e2ac7402607
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦