首页 > 其他分享 >webpack5多入口的时候HtmlWebpackPlugin怎么处理多个html文件

webpack5多入口的时候HtmlWebpackPlugin怎么处理多个html文件

时间:2024-03-01 09:25:00浏览次数:24  
标签:src webpack5 app2 app1 filename html HtmlWebpackPlugin

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

module.exports = {
  entry: {
    app1: './src/app1.js',
    app2: './src/app2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'app1.html',
      chunks: ['app1']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'app2.html',
      chunks: ['app2']
    })
  ]
};

  这样配置后,Webpack 将会根据每个入口文件的配置,分别生成对应的 HTML 文件,并自动引入正确的 JavaScript 文件。

标签:src,webpack5,app2,app1,filename,html,HtmlWebpackPlugin
From: https://www.cnblogs.com/idontcare/p/18046123

相关文章

  • javaweb01-html&css
    HTML-CSS基础介绍html:超文本标记语言学习标签css:层叠样式表学习样式基础标签&样式-新浪新闻biao标题标题排版(标签介绍)标题标签h1、h2水平线标签hr图片标签img超链接a标题样式css引入方式:行内样式:内嵌样式:外联样式:<link颜色表示形式:关键字:redrbg表示法:#rgb(......
  • Java中使用Jsoup实现网页内容爬取与Html内容解析并使用EasyExcel实现导出为Excel文件
    场景Pythont通过request以及BeautifulSoup爬取几千条情话:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87348030Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124182289Jsoup......
  • HTML 基础语法
    HTML基础语法【一】HTML概述HTML(HypertextMarkupLanguage)是一种标记语言,用于创建网页结构和内容。它是Web页面的基础,通过使用一系列的HTML标签和属性,可以描述网页的各种元素,如文本、图像、链接、表格等。HTML文档由HTML标签和文本组成,每个标签用于定义文档中的不同部分或元......
  • PDFUtils (解析PDF 中的文本 和 图片 PDF 转 HTML HTML 转 PDF)
    引入pdfbox依赖<dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.19</version></dependency>packagecom.icil.swif......
  • HTML-Learning
    WebLearningHTML标签属性HTML基本结构注释文档声明字符编码设置语言排版语义化标签块级元素和行内元素不常用的标签图片标签相对/绝对路径常见图片格式超链接列表表格常用标签表单HTML字符实体全局属性meta元信息HTML标签规范:小写https://www.w......
  • HTML常见标签
    超链接标签路径问题href属性用于定义要跳转的目标资源的地址1.完整的ur1http://www.atguigu.com/2.相对路径以当前资源的所在路径为出发点去找目标资源./表示的当前资源的所在路径,可以省略不写的../表示当前资源的上一层路径,需要时必须显示写出3.绝......
  • html快捷键
    参考:vscode下html快捷编程目录索引1.生成html模板:【!】或者【html:5】2.单个标签的快速生成2.1打完标签名,按下回车键或者Tab键:【div】2.2【#】id,【.】class,【[]】属性,【{}】标签内容3.生成多个相同的同级标签:【table*3】4.生成多个不同的同级标签:【div+input+tabl......
  • html
    图片+跳转<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>我的小米</title></head><body><h1>红米K70</h1><imgsrc="/static/mi.jpg"style="width:80......
  • html_将按钮和文件输入框合并在一起
    <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="代码测试.aspx.cs"Inherits="代码测试"%><!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server">......
  • pytest简易教程(34):pytest常用插件 - 测试报告(pytest-html)
     pytest简易教程汇总,详见:https://www.cnblogs.com/uncleyong/p/17982846关于pytest-html通过命令行方式,生成xml/html格式的测试报告,存储于用户指定路径报告会覆盖上一次的 插件安装pipinstallpytest-html 使用方式命令行格式:pytest--html=./report/report.html......