脚手架原理之webpack处理html文件和模块打包

脚手架原理之webpack处理html文件和模块打包

为了更好的理解项目脚手架的使用,我们来学习一下webpack工具,因为脚手架的底层就是基于webpack工具实现的。

安装

webpack工具是基于nodejs的,所以首先要有nodejs环境,其次需要下载两个模块,一个是代码中使用的webpack模块,另一个是终端中使用的webpack-cli模块。

npm install --save-dev webpack
npm install --save-dev webpack-cli

配置文件

通过编写webpack.config.js文件,来编写webpack的配置信息,完成工具的操作行为。webpack最大的优点就是可以把模块化的JS文件进行合并打包,这样可以减少网络请求数,具体是通过entry和output这两个字段来完成的。

// webpack.config.js 
module.exports = {entry: {main: './src/main.js'},output: {path: __dirname + '/dist',clean: true}
}

在终端中进行nodejs脚本build的调用,这样去进行webpack执行,需要我们自己配置一下package.json的脚本。

npm run build   # -> webpack

这样在项目目录下就产生了一个 /dist 文件夹,里面有合并打包后的文件。那么我们该如何预览这个文件呢?一般可通过html文件进行引入,然后再通过浏览器进行访问。

但是html的编写还需要我们自己引入要预览的JS文件,不是特别的方便,所以是否可以做到自动完成html的操作呢?答案是可以利用webpack工具的插件HtmlWebpackPlugin来实现。

这样HtmlWebpackPlugin插件是需要安装的,通过npm i HtmlWebpackPlugin来完成。

// webpack.config.js
module.exports = {...,plugins: [new HtmlWebpackPlugin({template: './public/index.html',title: 'vue-study'}),new VueLoaderPlugin()]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744959.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux学习-shell

目录 Shell: 3.Shell命令: command [-options] arg1 arg2 .. 1.Shell基本命令: 2.文件查看命令: 3.文件查找命令: 通配符: 7.压缩解压命令: 8.让虚拟机上网: 9.apt-get工具集: Shell: 1.保护Linux内核(用户和Linux内核不直接操作,通过操作Shell,Shell和内核交互) 2.命令…

【CSP试题回顾】201709-3-JSON查询

CSP-201709-3-JSON查询 解题思路 1. 初始化数据结构 map<string, string> strContent: 存储字符串类型属性的内容。键是属性名&#xff08;可能包含通过点.连接的多级属性名&#xff09;&#xff0c;值是属性的字符串值。vector<string> keyVec: 存储当前正在处…

Java基础知识总结(1)

Java概况 JavaSE是java分类中的标准版&#xff0c;是刚接触java要学习的基础知识。 JavaEE是java分类中的企业版&#xff0c;是java中的高级&#xff0c;涉及到的知识广泛。 JavaME中M是Micro的缩写&#xff0c;用在嵌入式等电子设备中。 Java软件工程师&#xff1a;通过Ja…

TongWeb+springboot部署war包失败问题

1.版本问题 关于 springboot2x 以上版本要用Tongweb6.1.7.5 以上版本 否则启动会各种报错 2.JPA冲突 TongWeb自带JPA&#xff0c;所以如果项目用的是hibernate的JPA 如:Spring Data JPA 那么就会冲突 解决方案: 找到 /TongWeb安装目录/bin 下面有个external.vimoptions文件…

Java必须掌握的遍历字符串和个数(含面试大厂题含源码)

在Java编程中&#xff0c;遍历字符串和统计字符个数是非常基础且常用的技能。下面我将介绍一些必须掌握的相关知识点和示例代码&#xff1a; 1. 字符串遍历 遍历字符串意味着逐个访问字符串中的每个字符。在Java中&#xff0c;可以使用for循环或charAt方法来实现。 使用for循…

【DAY11 软考中级备考笔记】数据结构 排序操作系统

数据结构 排序&&操作系统 3月14日 – 天气&#xff1a;晴 今天天气非常热&#xff0c;已经到20度了&#xff0c;春天已经来了。 1. 堆排序 堆排序的思想是首先建立一个堆&#xff0c;然后弹出堆顶元素&#xff0c;剩下的元素再形成一个堆&#xff0c;然后继续弹出元素&…

为什么要用scrapy爬虫库?而不是纯python进行爬虫?

为什么要用scrapy爬虫库&#xff1f;而不是纯python进行爬虫&#xff1f; Scrapy的优点Scrapy节省的工作使用纯Python编写爬虫的不足 Scrapy是一个使用Python编写的开源和协作的web爬虫框架&#xff0c;它被设计用于爬取网页数据并从中提取结构化数据。Scrapy的强大之处在于其广…

js进阶-函数参数-展开预算符-解构

一.函数参数 动态参数 剩余参数 1.1 动态参数 arguments是函数内部内置的伪数组变量&#xff0c;它包含了调用函数时传入的所有实参 function getSum() {// arguments 动态参数 只存在于 函数里面// 是伪数组 里面存储的是传递过来的实参console.log(arguments) // Argument…

自注意力机制函数(SelfAttention)python实现

Self-Attention。和Attention类似都是一种注意力机制。不同的是Attention是source对target&#xff0c;输入的source和输出的target内容不同。例如英译中&#xff0c;输入英文&#xff0c;输出中文。而Self-Attention是source对source&#xff0c;是source内部元素之间或者targ…

工科硕士研究生毕业论文撰写总结

工科硕士研究生毕业论文撰写总结 最近一段看了十几篇研究生毕业论文&#xff0c;发现不少问题。结合最近几年当评委及审论文的经验来总结下工科硕士研究生毕业论文撰写毕业论文问题与经验。 一&#xff0e;科技论文的总要求 论文是写给同行看的&#xff0c;注意读者对象。&a…

页面侧边栏顶部固定和底部固定方法

顶部固定用于侧边栏低于屏幕高度----左侧边栏 底部固定用于侧边栏高于屏幕高度----右侧边栏 vue页面方法 页面布局 页面样式&#xff0c;因为内容比较多&#xff0c; 只展示主要代码 * {margin: 0;padding: 0;text-align: center; } .head {width: 100%;height: 88px;back…

在notion里面实现四象限清单

四象限清单是一种时间管理工具&#xff0c;旨在帮助人们根据任务的重要性和紧急性来优先排序他们的工作。这个概念最早由德怀特艾森豪威尔提出&#xff0c;后来又被史蒂芬柯维在他的著作《高效能人士的七个习惯》中进一步普及。四象限清单将任务分为四个类别&#xff1a; 第一…

VueX详解

Vuex 主要应用于Vue.js中管理数据状态的一个库通过创建一个集中的数据存储&#xff0c;供程序中所有组件访问 使用场景 涉及到非父子关系的组件&#xff0c;例如兄弟关系、祖孙关系&#xff0c;甚至更远的关系组件之间的联系中大型单页应用&#xff0c;考虑如何更好地在组件外部…

洛谷 P5018 对称二叉树

题目背景 NOIP2018 普及组 T4 题目描述 一棵有点权的有根树如果满足以下条件&#xff0c;则被轩轩称为对称二叉树&#xff1a; 二叉树&#xff1b;将这棵树所有节点的左右子树交换&#xff0c;新树和原树对应位置的结构相同且点权相等。 下图中节点内的数字为权值&#xf…

计算机网络之网络层概念整理(上)

Ping背后协议的原理 Ping是一个网络工具&#xff0c;用于测试网络连接质量和设备可达性。它背后的协议是互联网控制消息协议&#xff08;Internet Control Message Protocol&#xff0c;简称ICMP&#xff09;。Ping通过发送ICMP回显请求消息给目标主机&#xff0c;并等待接收I…

window server2012 卸载iis后,远程连接黑屏

原因分析&#xff1a; 因为自己在卸载IIS的时候&#xff0c;不小心卸载了.net framework&#xff0c;系统没有了图形界面&#xff08;由完整模式Full变为了核心模式core&#xff09;&#xff0c;需要重新恢复.net framework4.5。 解决方法分析&#xff1a; 需要将核心模式co…

cool-admin node.js 实现分页 数据获取 直接框架

1.需求 获取当前的分页数据 cool有自己的封装的一套东西 2.解决 controller 注意注意注意 在这之前 配置 数据表和service Provide() CoolController({api: [],entity: BusinessOrderEntity,service: BusinessOrderService, }) /*** 获取分页数据*/Post(/page, { summary…

基于Vue移动端电影票务服务APP设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 相关技术 3 1.1 Vue框架 3 1.2 数据库MongoDB 3 1.3 Axios请求 3 1.4 H5、CSS3和JavaScript 4 1.5 本章小结 4 2 系统分析 5 2.1 功能需求 5 2.2 用例分析 5 2.3 用户功能 6 2.4本章小结 6 3 基于Vue电影票务服务APP设计 7 3.1 页面设计 …

YOLOv9改进策略:注意力机制 |通道注意力和空间注意力CBAM | GAM超越CBAM,不计成本提高精度

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a;通道注意力和空间注意力CBAM&#xff0c;全新注意力GAM&#xff1a;超越CBAM&#xff0c;不计成本提高精度 改进结构图如下&#xff1a; YOLOv9魔术师专栏 ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️…

使用hive数组函数查找哪些用户在不同的时间点购买了同样的商品

背景 有一张用户购买过的商品的记录表&#xff0c;记录着每个小时不同用户购买的商品的记录&#xff0c;有一个需求是查找哪些用户在两个不同的时间点都购买了同样的商品 哪些用户在不同的时间点购买了同样的商品的实现 1.分别获取每个商品不同时间点的用户集合&#xff0c;…