首页 > 其他分享 >webpack-安装html-webpack-plugin

webpack-安装html-webpack-plugin

时间:2023-05-22 23:22:20浏览次数:45  
标签:index 插件 plugin html webpack HTML

安装html-webpack-plugin

运行如下的命令,即可在项目中安装此插件:
npm install html-webpack-plugin -D

配置html-webpack-plugin

// 导入html插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',//指定原文件的存放路径
    filename: './index.html'//指定生成的文件的存放路径
})

module.exports = {
    mode: 'production',
    plugins: [htmlPlugin],//通过plugins节点,使htmlPlugin插件生效
}

解惑html-webpack-plugin

  1. 通过HTML插件复制到项目根目录中的index.html页面,也被放到了内存中
  2. HTML插件在生成的index.html页面自动注入了打包的bundle.js文件

标签:index,插件,plugin,html,webpack,HTML
From: https://www.cnblogs.com/yang-young-young/p/17422045.html

相关文章

  • webpack-安装和配置webpack-dev-server这个插件
    webpack插件的作用通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。最常用的webpack插件有如下两个:webpack-dev-server类似于node.js阶段用到的nodemon工具每当修改了源代码,webpack会自动进行项目的打包和构建html-webpack-pluginwebpack......
  • 如何通过Java代码将 PDF文档转为 HTML格式
    虽然PDF文件适合用于打印和发布,但不适合所有类型的文档。例如,包含复杂图表和图形的文档可能无法在PDF中呈现得很好。但是HTML文件可以在任何可运行浏览器的计算机上进行阅读并显示。并且HTML还具有占用服务器资源较小,便于搜索引擎收录的特点。那么今天这篇文章就将展示如何通过Ja......
  • 【整理】html5知识点5
    ============================================HTML5WebSocket什么是websocketWebSocket协议是html5引入的一种新的协议,其目的在于实现了浏览器与服务器全双工通信。看了上面链接的同学肯定对过去怎么低效率高消耗(轮询或comet)的做此事已经有所了解了,而在websocketAPI......
  • 【整理】html5知识点4
    1、==================================================================HTML5语义元素HTML5中新的语义元素许多现有网站都包含以下HTML代码:<divid="nav">,<divclass="header">,或者<divid="footer">,来指明导航链接,头部,以......
  • 【整理】html5知识点3
    1、====================================================================HTML5新的Input类型HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。本章全面介绍这些新的输入类型:colordatedatetimedatetime-localemailmonthnu......
  • 【整理】html知识点
    1、链接target属性_blank在新窗口中打开<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>2、链接id属性在HTML文档中插入ID:<aid="tips">有用的提示部分</a>在HTML文档中创建一个链接到"有用的提示部分(id="tips......
  • Failed to execute 'setSelectionRange' on 'HTMLInputElement'
    jcubic commented on7Jan2016WhenIusenumberinputI'vegoterrorinGoogleChromeUncaughtInvalidStateError:Failedtoexecute'setSelectionRange'on'HTMLInputElement':Theinputelement'stype('number')......
  • calc_AJAX.html
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>calc_AJAX.html</title><scripttype="text/javascript">functionloadXMLDoc(){varxmlhttp;if(window.XMLH......
  • 【PHP兴趣部落-05】html table(表格)
    一、简介:表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(tabledata),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。二、代码<!DOCTYPEhtml><html......
  • 【PHP兴趣部落-04】html 表单中常用元素
    一、简介html表单中常用的一些元素:比如按钮,输入框、单选框、复选框等控件元素。表单标签:<form>元素标签:<inputtype=”类型”name=”控件名”value=”值”>三、代码<html><head><title>html基本元素学习</title></head><!--表单--><formaction="ok.html"met......