程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构。分享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