webpack安装自动创建html的插件HtmlWebpackPlugin

前面已经讲过了配置webpack的过程以及简单的demo,下面直接将配置html-webpack-plugin插件。

第一步:在控制台输入npm i -D html-webpack-plugin,安装插件,可以在package.json中的devDependencies中查看是否安装成功。

第二步:在webpack.config.js中引入html-webpack-plugin插件,并通过new创建对象,可以对对象中的参数进行html模板的修改,示例以src下的index为模板,在dist中自动生成的html文件会包含src中index.html里面所编辑的内容。


第三步:在控制台npm run dev运行,在dist文件中会自动生成app.html文件,并自动引入生成的app.js文件,选中app.html在浏览器中打开即可进行检查结果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
常用的webpack插件有以下几个: 1. 热更新插件(HotModuleReplacementPlugin):该插件可以实现在开发过程中,无需刷新页面即可实时更新修改的代码,提高开发效率。\[1\] 2. 提取文本插件(ExtractTextWebpackPlugin):该插件可以将CSS样式从JavaScript文件中提取出来,单独生成一个CSS文件,以减小文件体积并提高加载速度。\[2\] 3. 代码压缩插件(UglifyJsPlugin):该插件可以对JavaScript代码进行压缩和混淆,减小文件体积,提高加载速度。\[2\] 4. HTML插件(HtmlWebpackPlugin):该插件可以根据模板生成HTML文件,并自动引入打包后的JavaScript和CSS文件,简化HTML文件的创建和维护工作。\[1\] 这些插件可以通过在webpack配置文件中的plugins选项中进行配置和使用。同时,还有许多其他的插件可供选择,根据具体需求选择合适的插件来优化和增强webpack的功能。\[3\] #### 引用[.reference_title] - *1* *3* [webpack--总结18个webpack插件,总会有你想要的](https://blog.csdn.net/wenmin1987/article/details/107013532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Webpack常用插件总结](https://blog.csdn.net/qq_39040042/article/details/88019723)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值