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

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

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

相关文章

【UE 材质】任务目标点效果

效果 步骤 1. 新建一个工程,创建一个Basic关卡 2. 新建一个材质,这里命名为“M_GoalPoint” 打开“M_GoalPoint”,设置混合模式为“半透明”,勾选“双面” 在材质图表中添加如下节点 此时预览效果如下 继续添加如下节点 此时效果…

无人机巡检中台揭秘,无人机管控平台助力巡查无人机巡检方案落地

随着无人机智能巡检的飞速发展,巡查无人机应用场景也日益多元,无人机巡检方案被频繁落地到工业生产及巡检巡逻业务中。而无人机管控平台应运而生,成为推动无人机智能巡检的关键工具。那我们一起来看一下无人机管控平台的作用: 一、…

微信小程序引入Vant Weapp修改样式不起作用,使用外部样式类进行覆盖

一、引入Vant Weapp后样式问题 在项目中使用第三方组件修改css样式时,总是出现各种各样问题,修改的css样式不起作用,没有效果,效果不符合预期等。 栗子(引入一个搜索框组件)实现效果: 左侧有一个搜索文字背景为蓝色,接着跟一个搜索框 wxml <view class"container&q…

【Python】 Python web开发库大全

库排序是按照使用人数和文档的活跃度为参考进行的&#xff0c;建议大家使用排名靠前的框架&#xff0c;因为它们的文档更齐全&#xff0c;技术积累要更多&#xff0c;社区更繁盛&#xff0c;能得到更好的支持&#xff0c;这样在遇到自己无法解决的问题&#xff0c;可以更快更高…

数据结构:单链表——定义、插入、删除

1、定义 注&#xff0c;以下都是带头节点的单链表 typedef struct LNode {ElementType data;struct LNode *next; }LNode,*LinkList;bool InitList(LinkList &L){L (LNode *)malloc(sizeof(LNode));if(LNULL){//内存不足return false;}L->nextNULL;return true; }这里…

Mint Blockchain,一个聚焦在 NFT 领域的 L2 网络

Mint 是什么&#xff1f; Mint 是一个聚焦在 NFT 领域的创新型 L2 网络。Mint Blockchain 致力于促进 NFT 资产协议标准的创新和现实商业场景中 NFT 资产的大规模采用。 不管是过去 3 年在以太坊网络涌现的 NFT&#xff0c;还是当下在比特币网络活跃的“铭文” NFT&#xff0c…

通信协议 远程调用RPC

1.通讯协议 所有的HDFS通讯协议都是建立在TCP/IP协议之上。 客户端通过一个可配置的TCP端口连接到Namenode&#xff0c;通过ClientProtocol协议与Namenode交 互。而Datanode使用DatanodeProtocol协议与Namenode交互。 一个远程过程调用(RPC)模型被抽象出来封装ClientProtoc…

微信小程序引入vant-weapp爬出坑

最新的微信小程序的项目结构跟之前的不一样&#xff0c;然后&#xff0c;按照vant-weapp上的官方文档&#xff0c;安装步骤失败&#xff0c;提示了各种错误。如果你的微信小程序结构跟我的一致&#xff0c;可以采用和我一样的方案。 微信小程序引入vant-weapp爬出坑 移动pack…

深入浅出:HTTPS单向与双向认证及证书解析20231208

介绍: 网络安全的核心之一是了解和实施HTTPS认证。本文将探讨HTTPS单向认证和双向认证的区别&#xff0c;以及SSL证书和CA证书在这些过程中的作用&#xff0c;并通过Nginx配置实例具体说明。 第一部分&#xff1a;HTTPS单向认证 定义及工作原理&#xff1a;HTTPS单向认证是一…

ELK架构监控MySQL慢日志

目录 一、架构概述 二、安装部署 三、Filebeat配置 四、Logstash配置 一、架构概述 本文使用将使用filebeat收集mysql日志信息&#xff0c;发送到redis中缓存&#xff0c;由logstash从redis中取出&#xff0c;发送es中存储&#xff0c;再从kibana中展示。 二、安装部署 ELK…

做数据分析为何要学统计学(5)——什么问题适合使用t检验?

t检验&#xff08;Students t test&#xff09;&#xff0c;主要依靠总体正态分布的小样本&#xff08;例如n < 30&#xff09;对总体均值水平进行差异性判断。 t检验要求样本不能超过两组&#xff0c;且每组样本总体服从正态分布&#xff08;对于三组以上样本的&#xff0…

同一个kmz数据同样的底图在QGIS上显示位置正常, 在Mars3d中显示就偏移了一些

问题&#xff1a; 1.同一个kmz数据同样的底图在QGIS上显示位置正常, 在网页中显示就偏移了一些 在qgis上的显示效果&#xff0c;和在mars3d的显示效果&#xff1a;数据明显存在偏移。 解决步骤&#xff1a; 1.查看了kmz数据&#xff0c;里面实际是tif图片数据&#xff0c;估…

MES管理系统在非标制造企业中的应用

在当今制造业中&#xff0c;非标制造企业逐渐成为一种重要的存在。与传统的批量生产制造企业不同&#xff0c;非标制造企业主要特点是能够根据客户需求进行定制化生产。这种定制化的生产模式对企业的管理提出了更高的要求&#xff0c;同时也带来了更多的挑战。在非标制造企业中…

mac苹果电脑清除数据软件CleanMyMac X4.16

在数字时代&#xff0c;保护个人隐私变得越来越重要。当我们出售个人使用的电脑&#xff0c;亦或者离职后需要上交电脑&#xff0c;都需要对存留在电脑的个人信息做彻底的清除。随着越来越多的人选择使用苹果电脑&#xff0c;很多人想要了解苹果电脑清除数据要怎样做才是最彻底…

ELK(三)—安装可视化工具

目录复制 目录 一、ElasticSearch-Head可视化工具介绍1.1特性&#xff1a;1.2用法&#xff1a; 二、安装2.1docker安装2.2Chrome插件安装 一、ElasticSearch-Head可视化工具介绍 ElasticSearch-Head 是一个基于浏览器的 Elasticsearch 可视化工具&#xff0c;它提供了一个直观…

【GAMES101】观测变换

图形学不等于 OpenGL&#xff0c;不等于光线追踪&#xff0c;而是一套生成整个虚拟世界的方法 记得有个概念叫光栅化&#xff0c;就是把三维虚拟世界的事物显示在二维的屏幕上&#xff0c;这里就涉及到观察变换 观察变换&#xff0c;叫viewing transformation&#xff0c;包括…

1、关于前端js-ajax绕过

1、Ajax知识 、js--Ajax 传统请求跟js--Ajax请求的差别 在实例中用的上js-ajax的有 表单验证&#xff1a; 在用户填写表单时&#xff0c;可以使用 Ajax 在不刷新页面的情况下验证表单字段&#xff0c;并提供即时反馈。 实时搜索&#xff1a; 在搜索框中输入内容时&#xff0…

Gateway

网关的作用&#xff1a; 可以对访问的用户进行身份认证和权限校验还可以服务路由&#xff0c;负载均衡还可以进行请求限流 网关本身也是微服务的一部分&#xff0c;所以需要使用nacos进行服务注册和发现 网关路由的配置 路由id&#xff1a;路由唯一标识uri&#xff1a;路由…

使用STM32 HAL库进行GPIO控制的实例

✅作者简介&#xff1a;热爱科研的嵌入式开发者&#xff0c;修心和技术同步精进&#xff0c; 代码获取、问题探讨及文章转载可私信。 ☁ 愿你的生命中有够多的云翳,来造就一个美丽的黄昏。 &#x1f34e;获取更多嵌入式资料可点击链接进群领取&#xff0c;谢谢支持&#xff01;…

独立服务器的主要应用方向有什么_Maizyun

独立服务器的主要应用方向有什么&#xff1f; 独立服务器是指托管单一应用程序或网站的单台服务器。随着互联网的发展&#xff0c;独立服务器已经成为许多企业和个人用户的重要选择&#xff0c;因为它提供了更高的灵活性和控制权。本文将探讨独立服务器的主要应用方向。 一、…