Webpack
文章平均质量分 85
记录webpack学习的点滴
老Chen先生
这个作者很懒,什么都没留下…
展开
-
Webpack5学习笔记(基础篇九)——缓存
通常,我们使用webpack来打包我们的模块化后的应用程序,webpack 会生成一个可部署的/dist目录,然后把打包后的内容放置在此目录中。只要/dist目录中的内容部署到server上,client (通常是浏览器)就能够访问此server的网站及其资源。而最后一步获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。由于原创 2022-01-11 15:19:46 · 1137 阅读 · 0 评论 -
Webpack5学习笔记(基础篇八)——代码分离
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代码防止重复:使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk动态导入:通过模块的内联函数调用来分离代码。1、入口起点(entry)原创 2022-01-10 09:11:21 · 794 阅读 · 2 评论 -
Webpack5学习笔记(基础篇七)—— Loader加载器
1、Loader的作用webpack可以自动解析js和json格式的文件,这个是webpack开箱即用的功能,那如果要解析其他类型的文件呢,比如一张图片?前面我们讲过 Asset Module功能可以,而作为最常用的解析工具,loader也可以将这些非js的文件转化为有效的模块。webpack允许我们使用loader来处理文件,loader是一个导出为function的node模块,说白了,loader就是一个函数function。可以将匹配到的文件进行一次转换,同时loader可以链式传递。2、L原创 2021-12-27 23:06:53 · 2558 阅读 · 2 评论 -
Webpack5学习笔记(基础篇六)—— Assets资源模块的加载
在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。webpack 最出色的功能之一就是,除了引入 JavaScript,还可以内置的资源模块 Asset Modules 引入任何其他类型的文件。在webpack4的时候以及之前,我们通常是使用file-loader与url-loader来帮助我们加载其他资源类型。1、Asset Modules Type的四种类型而webpack5可原创 2021-12-26 20:46:27 · 3852 阅读 · 1 评论 -
Webpack5学习笔记(基础篇五)—— mode之Development环境相关参数配置
在Webpack5中,mode(模式)有三种:development(开发环境模式)production(生产环境模式)none或' '(空)在不同模式中,我们可能对于webpack.config.js配置文件进行不同参数的设置比如,在development开发环境中,我们可能使用devTool,devServer等对webpack打包后的代码进行浏览器调试;在production生产环境中,我们可能在optimization配置下面的minimizer中使用CssMinimizerPlugi原创 2021-12-26 16:45:12 · 2773 阅读 · 1 评论 -
Webpack5学习笔记(基础篇四)——Plugins插件
1、Plugins作用Webpack中另一个非常重要的功能是Plugins,我们称之为插件。插件(Plugins)是用来拓展webpack功能的,它们会在整个构建过程中生效,执行相关的任务。2、Plugins和Loaders的区别有个题外话,在webpack中还有一个概念,那就是loaders,这两个次经常被用来做对比,我也常常弄混,但是他们是完全两个不同的东西。Loaders(加载器):是在打包构建过程中用来处理源文件的(JSX,Scss,Less…),一次处理一个Plugins(插件)并不原创 2021-12-26 15:40:36 · 1225 阅读 · 1 评论 -
Webpack5学习笔记(基础篇三)——webpack基础安装与打包
在安装webpack之前,我们要先安装 node,因为webpack是构建在node.js之上。1、安装node.js使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。 使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能,或者缺少相关的package。Node下载地址——Node.js官网(mac 可能会下载 .pkg 文件,windows 可能会下载 .exe 或 .msi 文件)下来就是按照操作步骤点击下一步安装就行原创 2021-12-26 14:32:49 · 896 阅读 · 0 评论 -
Webpack5学习笔记(基础篇二)——module、chunk和 bundle 的关系和区别
在学习webpack相关知识的时候,总是遇到这个名词,module、chunk和bundle,只是大概知道是模块之类的意思,但是不知道具体的关系,所以就想研究一下。首先我们在 src 目录下写我们的业务代码,引入index.js、utils.js、common.js 和 index.css 这 4 个文件,目录结构如下:src/├── index.css├── index.html # 这个是 HTML 模板代码├── index.js├── common.js└── utils.jsin原创 2021-12-25 20:30:33 · 789 阅读 · 1 评论 -
Webpack5学习笔记(基础篇一)—— webpack相关介绍
1、webpack是什么webpack 是前端的一个项目构建工具,它是基于Node.js开发出来的一个前端工具。WebPack可以看做是模块打包机(bundler),通过分析项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。2、为什么要使用webpack2.1、js和css依赖问题JavaScript和CSS的依赖问题。开发过程中,JavaScript和CSS的在页面中的顺序问题,经常会造成CS原创 2021-12-25 18:20:21 · 825 阅读 · 0 评论