Webpack学习系列 | Webpack 5 集成 HTML 插件高效解决文件路径问题

程序员优雅哥简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要通过实操讲解运用Webpack 5 如何集成 HTML 插件从而高效解决文件路径问题

在前面的学习中，我们创建了入口页面: template/index.html，在该文件中手动引入了打包后的 bundle.js 文件。如果打包路径修改了，index.html 中也需要修改 bundle.js 的文件路径，很不方便。其实这些工作，webpack 提供了对应的插件帮助我们完成： html-webpack-plugin。

1 安装依赖

安装 html-webpack-plugin 为开发依赖：

yarn add html-webpack-plugin -D

2 修改 webpack 配置

修改 webpack.config.js 文件：

首页引入该插件：

const HtmlWebpackPlugin = require('html-webpack-plugin')