当前位置: 首页 > news >正文

Webpack技术入门与实践

1.概念:
本质上, webpack是一个现代JavaScript应用程序的静态模块打包器,当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle;
四个核心概念:
(1)入口(entry): 示w ebpack应该使用哪个模块,来作为构建起内部依赖图的开始;进入入口起点后,webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的;
每个依赖随机被处理,最后输出到称之为bundles的文件中;
可以 通过在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点),默认值是./src
文件:webpack.config.js
module.exports = {entry: './path/to/my/entry/file.js'};

(2)输出(output): output属性告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件,默认值为./dist。
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中,你可以 通过在配置中指定一个 output字段,来配置这些处理过程:
const path = require('path');  //Node.js核心模块,用于操作文件路径module.exports = {entry: './path/to/my/entry/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js'}};

(3)loader:让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript). loader可以将所有类型的文件转换为webpack能够处理的有效模块,然后就可以利用webpack的打包能力,对它们进行处理;
本质上,webpack loader将所有类型的文件,转换为应用程序的依赖图(和最终的bundle)可以直接引用的模块
在更高层面,在webpack的配置好中loader有两个小目标:
*****test属性,用于 标识出应该被对应的loader进行转换的某个或某些文件
*****use属性,表示进行转换时,应该使用哪个loader
const path = require('path');const config = {output: {filename: 'my-first-webpack.bundle.js'},module: {            //告诉webpack编译器:嘿,webpack编译器,当你碰到在  require()/import 语句中被解析为  ".txt"的路径时,在你对它打包之前,先使用raw-loader转换一下rules: [{ test: /\.txt$/, use: 'raw-loader' }   //重要的是要记得,在webpack配置中定义的loader时,要定义的module.rules中,而不是rules]}};module.exports = config;

(4)插件(plugins):插件可以执行的范围是:从打包优化和压缩,一直到重新定义环境中的变量; 插件接口功能极其强大,可以用来处理各种各样的任务;
想要使用一个插件,你 只需要 require()它,然后把它添加到 plugins数组中,这时就需要通过使用   new 操作符来创建它的一个实例
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件const config = {module: {rules: [{ test: /\.txt$/, use: 'raw-loader' }]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]};module.exports = config;

2.webpack构建流程:
(1)解析webpack配置参数, 合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配置结果
(2)注册所有配置的插件,好让 插件监听webpack构建生命周期的事件节点,以做出对应的反应
(3)从配置的entry入口文件开始解析文件构建AST语法树( 以树状的形式表现 编程语言 的语法结构, 树上的每个节点都表示源代码中的一种结构),找出每个文件所依赖的文件,递归下去
(4)在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换
(5)递归完后得到每个文件的最终结果,根据entry配置生成代码块chunk
(6)输出所有chunk到文件系统
3.单页应用:
(1)一个单页应用需要配置一个entry 指明执行入口,webpack会为entry 生成一个包含这个入口所有依赖的chunk,但要让它在浏览器里跑起来还需要一个HTML文件来加载chunk生成的js文件,如果提取出了css还需要让HTML文件引入提取出的css, web-webpack-plugin里的WebPlugin可以自动完成这些工作;
const { WebPlugin } = require('web-webpack-plugin');
module.exports = {entry: {app: './src/doc/index.js',},plugins: [// 一个WebPlugin对应生成一个html文件new WebPlugin({//输出的html文件名称filename: 'index.html',//这个html依赖的`entry`requires: ['app'],    //指明这个HTML依赖哪些entry,entry生成的js和css会自动注入到HTML里}),],
};

(2)可以配置这些资源的注入方式,支持如下属性:
*****_dist :只是在生产环境下才引入该资源
*****_dev : 只有在开发环境下才引入该资源
*****_inline: 把该资源的内容潜入到html里
*****_ie :只有IE浏览器才需要引入的资源
new WebPlugin({filename: 'index.html',requires: {app:{_dist:true,_inline:false,}},
}),

4.一个项目管理多个单页应用:
(1)一般项目里会包含多个单页应用,虽然多个单页应用也可以合并成一个但是这样做会导致用户没访问的部分也加载了,如果项目里有很多个单页应用,为每个单页应用配置一个entry 和 WebPlugin?如果项目又新增一个单页应用,又去新增webpack配置?这样做太麻烦了, web-webpack-plugin里的AutoWebPlugin可以方便的解决这些问题;
module.exports = {plugins: [// 所有页面的入口目录new AutoWebPlugin('./src/'),]
};

AutoWebPlugin会把  ./src/目录下所有每个文件夹作为一个单页页面的入口, 自动为所有的页面入口配置一个WebPlugin输出对应的html。要新增一个页面就在 ./src/下新建一个文件夹包含这个单页应用所依赖的代码,A

相关文章:

Webpack技术入门与实践

1.概念: 本质上, webpack是一个现代JavaScript应用程序的静态模块打包器,当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bund…...

HarmonyOS开发(九):数据管理

1、概述 1.1、功能简介 数据管理为开发者提供数据存储、数据管理能力。 它分为两个部分: 数据存储:提供通用数据持久化能力,根据数据特点,分为用户首选项、键值型数据库和关系型数据库。数据管理:提供高效的数据管…...

acwing-Linux学习笔记

acwing-Linux课上的笔记 acwing-Linux网址 文章目录 1.1常用文件管理命令homework作业测评命令 2.1 简单的介绍tmux与vimvimhomeworktmux教程vim教程homework中的一些操作 3 shell语法概论注释变量默认变量数组expr命令read命令echo命令printf命令test命令与判断符号[]逻辑运算…...

Python渗透测试——一、数据包的编辑工具——Scapy

Python渗透测试 一、Scapy简介二、Scapy中的分层结构三、Scapy中的常用函数四、在Scapy 中发送和接收数据包五、Scapy 中的抓包函数 一、Scapy简介 提到数据包(这里泛指帧、段和报文等)的构造,我们首先需要了解协议和分层这两个概念。在“互联世界的规则一协议”中…...

使用webstrom编写vue开启提示

1.语言服务器选择 2.文件类型–忽略的文件和文件夹,删去,node_modules,就可以点进去库了 3.禁用JSLint、TSLint 4.开启node辅助 5.如果是vite,开启自动读取,或手动指定 6.如果是Webpack,开启自动读取&#…...

linux远程桌面管理工具(xrdp)、向日葵

Windows远程桌面 linux远程桌面 使用向日葵远程桌面(手机端同理) Windows远程桌面 微软自带Remote Desktop Connection Manager (RDCMan)远程控制管理软件介绍 远程桌面连接管理器 v2.93 linux远程桌面 Windows远程桌面Ubunt…...

【力扣100】8.找到字符串中所有字母异位词

添加链接描述 class Solution:def findAnagrams(self, s: str, p: str) -> List[int]:sildingstrresult[]p.join(sorted(p))for i in range(len(s)):if len(sildingstr)<len(p):sildingstrsildingstrs[i]# print(sildingstr)if len(sildingstr)len(p):sort_sildingstr.j…...

圆通速递查询,圆通速递单号查询,用表格导出查询好的物流信息

批量查询圆通速递单号的物流信息&#xff0c;以表格的形式导出查询好的物流信息。 所需工具&#xff1a; 一个【快递批量查询高手】软件 圆通速递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;并登录 步骤2&#xff1a;点击主界…...

FLStudio中文2024中文最新汉化安装包下载

FLStudio中文21最新版本以其使用速度而闻名&#xff0c;是一个高度复杂的音乐制作环境。FL Studio免费&#xff0c;联合国音序器音频和MIDI每个复合编辑都是音乐。现代的DAW是一种非凡的野兽。首先&#xff0c;它在很大程度上把自己放在了(几乎)每个人记录过程的核心。其次&…...

AI:大语言模型训练方法 - 机器学习

Transformer Transformer是一种深度学习的模型架构&#xff0c;特别适用于自然语言处理任务。Transformer 模型的核心创新在于其 "自注意力"&#xff08;Self-Attention&#xff09;机制&#xff0c;这种机制使得模型可以有效地捕捉输入数据中的长距离依赖关系。 T…...

Linux(17):认识与分析登录档

什么是登录档 【详细而确实的分析以及备份系统的登录文件】是一个系统管理员应该要进行的任务之一。 登录档 就是记录系统活动信息的几个文件&#xff0c;例如&#xff1a;何时、何地(来源IP)、何人(什么服务名称)、做了什么动作(讯息登录啰)。 换句话说就是&#xff1a;记录系…...

STM32上模拟CH340芯片的功能 (一)

#虚拟串口模拟CH340# 代码gitee地址&#xff1a;STM32F103_CH340: 用STM32模拟ch340USB串口的功能 一、思路 1. 确定通信接口&#xff1a;CH340是一款USB转串口芯片&#xff0c;因此您需要选择STM32上的某个USB接口来实现USB通信。通常情况下&#xff0c;STM32系列芯片都有内…...

图论——最小生成树

图论——最小生成树 A wise man changes his mind, a fool never will 生成树 一个连通图的生成树是一个极小的连通子图&#xff0c;它包含图中全部的n个顶点&#xff0c;但只有构成一棵树的n-1条边。 最小生成树 在这些边中选择N-1条出来&#xff0c;连接所有的N个点。这N-1…...

C++基础 -42- STL库之list链表

———————STL库之list链表——————— &#x1f384; list链表的格式(需要定义头文件) list<int> data1(4, 100);list<int> data2(4, 500);&#x1f384;list链表的合并接口 &#x1f384;举例使用合并接口并且验证 data2.merge(data1);list<int>::…...

Backend - Python 序列化

目录 一、作用1&#xff1a;代码块存入数据库 二、作用2&#xff1a;前后端传递数据 &#xff08;一&#xff09;前端 1. JSON.stringify() 2. JSON.parse() &#xff08;二&#xff09;后端 1. json.dumps() &#xff08;1&#xff09;作用 &#xff08;2&#xff09…...

初级数据结构(一)——顺序表

文中代码源文件已上传&#xff1a;数据结构源码 <-上一篇 NULL | 初级数据结构&#xff08;二&#xff09;——链表 下一篇-> 1、顺序表的特点 1.1、数组 现实中数据记录一般都记录在表格中&#xff0c;如进货单、菜单等&#xff0c;它们的最大特点就是…...

实现:切换页面切换标题,扩展 vue-router 的类型

布局容器-页面标题 网址&#xff1a;https://router.vuejs.org/zh/guide/advanced/meta 给每一个路由添加 元信息 数据 router/index.ts const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: /login, component: () > im…...

已通过考试和认证注册以及后续计划表

已通过考试和认证注册以及后续计划表 软考 - 计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试信息系统集成及服务项目管理人员工程类考试计划你关注的证书样子 软考 - 计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试 高级 信息系统项目管理师&…...

开源计算机视觉库OpenCV详解

目录 1、概述 2、OpenCV详细介绍 2.1、OpenCV的起源 2.2、OpenCV开发语言 2.3、OpenCV的应用领域 3、OpenCV模块划分 4、OpenCV源码文件结构 4.1、根目录介绍 4.2、常用模块介绍 4.3、CUDA加速模块 5、OpenCV配置以及Visual Studio使用OpenCV 6、关于Lena图片 7、…...

使用pytorch查看中间层特征矩阵以及卷积核参数

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 1和4是之前讲过的alexnet和resnet模型 2是分析中间层特征矩阵的脚本 3是查看卷积核参数的脚本 1设置预处理方法 和图像训练的时候用的预处理方法保持一致 2实例化模型 3载入之前的模型参数 4载入…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...