angular 如何在index html 页面包含子页面_Webpack4.0各个击破(1)html篇
webpack
作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack
工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本
)
一. webpack中的html
对于浏览器而言,html
文件是用户访问的入口点,也是所有资源的挂载点,所有资源都是通过html
中的标记来进行引用的。而在webpack
的构建世界里,html
只是一个展示板,而entry
参数中指定的javascript
入口文件才是真正在构建过程中管理和调度资源的挂载点,html
文件中最终展示的内容,都是webpack
在加工并为所有资源打好标记以后传递给它的,业界将这种有别与浏览器的模式称之为“webpack的逆向注入”。
二.html文件基本处理需求
前端项目可以大致分为 单页面应用 和 多页面应用,现代化组件中的html
文件主要作为访问入口文件,是<style>
样式标签和<script>
脚本标签的挂载点,打包中需要解决的基本问题包括:
- 个性化内容填充(例如页面标题,描述,关键词)
- 多余空格删除(连续多个空白字符的合并)
- 代码压缩(多余空白字符的合并)
- 去除注释
三.入口html文件的处理
3.1 单页面应用打包
对于入口html
文件的处理直接使用html-webpack-plugin
插件来设置一定的配置参数即可,详细的配置参数可以参考其github地址:html-webpack-plugin项目地址,在此直接给出基本用法示例。
webpack.config.js
配置:
index.html
模板文件(构建生成的入口页面是以此为模板的):
打包后生成的index.html
:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div><p>tony stark</p><p>bruce banner </p></div><script type="text/javascript" src="main.boundle.js"></script></body></html>
3.2 多页面应用打包
如果项目中有多个页面,那么打包的时候需要考虑两个基本问题:
- 1.如何自动生成多个页面?
- 2.如果引用中存在公共的模块,怎样才能提取公共模块?
为了演示多页面应用打包的场景,我们来构建如下的一组示例项目及其依赖关系:
多页面应用的基本结构理解起来并不复杂,可以将其看做是多个单页面应用的组合,在webpack
中需要进行一些配置调整:
entry参数需要配置多个依赖入口文件:
entry:{"main":__dirname + "/src/indexController.js","about":__dirname + "/src/aboutController.js","list":__dirname + "/src/listController.js",
},
html文件则需要分别引用对应的入口文件并生成对应的访问入口:
plugins:[//index.htmlnew HtmlWebpackPlugin({title:'MainPage',template:'src/index.html',filename:'index.html',templateParameters:{param1:'tony stark',param2:'bruce banner'},chunks:['main'],}),//about.htmlnew HtmlWebpackPlugin({title:'AboutPage',template:'src/about.html',filename:'about.html',templateParameters:{param1:'tony stark',param2:'bruce banner'},chunks:['about'],}),//list.htmlnew HtmlWebpackPlugin({title:'ListPage',template:'src/list.html',filename:'list.html',templateParameters:{param1:'tony stark',param2:'bruce banner'},chunks:['list'],}),],
可以看到在生成html
文件时已经为其单独引用了chunks
数组中指定的模块,这使得对应的页面生成时只依赖自己需要的脚本。
1.关于公共模块提取
上一小节解决了多页面应用的基本打包的需求,从得到的打包后的模块中,很容易看出它存在重复打包的问题,eventbus.js
这个公共库被indexController.js
和aboutController.js
中均被引用,但在不同的chunks中被重复打包,当公共部分的体积较大时,这样的方式明显是不能接受的。实际上分包问题并不是多页面应用中才存在的,而且是非常复杂的,它不仅要考虑公共模块本身的大小,模块之间的引用关系,还需要考虑同步引用和异步引用等等非常多的问题,笔者尚未研究清楚。
webpack
1-3的版本中使用commonsChunkPlugin
插件来解决这个问题,在4.0以上的版本中废弃了原有方法,改为使用optimization.splitChunks
和optimization.runtimeChunk
来解决优化chunk拆分的问题,关于两者的区别可以看《webpack4:连奏中的进化》这篇博文。
2. 组件模板html文件的处理
在基于Angular
的项目中或许你会需要处理此类问题。github上点赞较多的Angular-webpack-starter
项目对于html文件的处理是直接使用raw-loader
当做文本文件处理,推测其内部将html文件中的内容当做模板字符串使用并在框架内部进行了加工。
需要注意的是,html-webpack-plugin
插件是依赖于html-loader
而工作的,当你显式使用/.html$/
作为规则来筛选文件时,同样会选择到作为入口文件的html
资源,从而造成冲突报错。在Angularjs1.X
项目中可考虑使用ngTemplage-loader
插件。
四. 小结
本文使用的html
文件是较为简单的,仅包含基本的标签和属性,并未包含其他资源引用(样式,图片等),毕竟webpack
的组成部分太过庞杂,去除干扰信息有针对性的学习更容易理解。资源管理及定位将在后续的章节阐述。
作者:大史不说话
链接:Webpack4.0各个击破(1)html篇
来源:博客园
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
angular 如何在index html 页面包含子页面_Webpack4.0各个击破(1)html篇相关推荐
- layer用ajax往jsp页面传值,layer.open中父页面向子页面传值(示例代码)
1.咱先看图说话 父list.jsp 子operate.jsp 实现的代码 1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open ...
- 父页面调用子页面方法, 子页面加载父页面传送的数据
先看效果图就明白需求了: 点击search查询结果集, 点击某一条将该条的其他信息分别加载到tab1和tab2中, 即net bill和other amount这两个tab. 点击clear清空查询条 ...
- Layui父页面和子页面直接互相传值
目录 概述 后端 前端 父页面样式 父页面代码 子页面代码 父页面->子页面 子页面->父页面 可能产生的疑问 概述 实现效果: ①将父页面的数据表格的指定行数据,传递到子页面. (点击父 ...
- vue 子页面调用父页面的参数_js父页面调用子页面数据时,子页面通过父页面传过来的参数回调父页面具体方法_html/css_WEB-ITnose...
今天写代码时发现同一页面多个地方需要调用同一个子页面,如果多个方法调用时,同一子页面回调父页面方法则会出问题,所以查了下资料,让这个功能通用化,根据具体方法回调具体父页面方法,顺便总结一下,希望以后可 ...
- js里父页面与子页面的相互调用
一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.meth ...
- js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
- iframe父页面与子页面之间的元素获取与方法调用
JS 父页面调用子页面 子页面调用父页面 元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById(&qu ...
- artdialog4.1.7 中父页面给子页面传值
artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=" ",子页面用art.dialog.opener ...
- html如何添加子页面,html5 父页面调用子页面js方法
父页面代码: var randid=result.rows.item(0)['id']; plus.webview.close("test_order_detail");//创建之 ...
最新文章
- 《LeetCode力扣练习》剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 Java
- 三维重建_快速分类–三向和双枢轴
- swift4 linux,Swift 4正式发布,新功能概览
- Android --- 解决 registerLocationListener 过时问题(百度地图)API
- 使用IntentService在Service中创建耗时任务
- Linux 下实现普通用户只能写入某个目录
- 操作系统和常用软件下载
- python爬取暖享图片
- 外媒:日本和芬兰将合作开发6G技术 诺基亚将参与其中
- docker RUN、CMD 和 ENTRYPOINT
- 2018-05-17-OAA-一种mermaid脚本驱动的软件项目模块图形化表述思路
- 实例展示:用css实现网页图片特效
- solr自带智能拼音收藏
- vertica 数据库 linux,CentOS 7下安装vertica记录
- 【宏定义】#define 的使用方法
- web怎么将dwg转换图片_怎么将DWG图纸转换成JPG格式图片
- 西邮Linux兴趣小组2019-2021年纳新面试题解析
- Python生成个性二维码
- Debian选择并安装软件需要下载很久的解决办法
- 一个永久免费的图片鉴黄api接口