前端工程化
文章平均质量分 73
前端工程化
猛扇赵四那半好嘴
程序媛一枚,热爱写 bug!
展开
-
前端工程化之:webpack4-2(babel预设+babel插件+webpack中运行)
babel有多种预设,最常见的预设是。可以让你使用最新的JS语法,而无需针对每种语法转换设置具体的插件。原创 2024-02-21 08:56:16 · 2102 阅读 · 0 评论 -
前端工程化之:webpack4-1(babel的安装和使用)
babel一词来自于希伯来语,直译为巴别塔。巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔,不同版本的浏览器能识别的ES标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,和古巴比伦一样,前端开发也面临着这样的困境。babel的出现,就是用于解决这样的问题,它是一个编译器,可以把不同标准书写的语言,编译为统一的、能被各种浏览器识别的语言。由于语言的转换工作灵活多样,babel的做法和差不多,它本身仅提供一些分析功能,真正的转换需要依托于插件完成。原创 2024-02-20 09:12:35 · 675 阅读 · 0 评论 -
前端工程化之:webpack3-8(抽离css文件)
目前, css 代码被 css-loader 转换后,交给的是 style-loader 进行处理。style-loader 使用的方式是用一段 js 代码,将样式加入到 style 元素中。而实际的开发中,我们往往希望依赖的样式最终形成一个 css 文件此时,就需要用到一个库: mini-css-extract-plugin 。该库提供了1个 plugin 和1个 loader 。原创 2024-02-20 09:12:12 · 285 阅读 · 0 评论 -
前端工程化之:webpack3-7(PostCss)
可以看出,CSS工程化面临着诸多问题,而解决这些问题的方案多种多样。如果把CSS单独拎出来看,光是样式本身,就有很多事情要处理。既然有这么多事情要处理,何不把这些事情集中到一起统一处理呢?PostCss就是基于这样的理念出现的。PostCss类似于一个编译器,可以将样式源码编译成最终的CSS代码。看上去是不是和LESS、SASS一样呢?但PostCss和LESS、SASS。原创 2024-02-19 08:33:32 · 1458 阅读 · 0 评论 -
前端工程化之:webpack3-6(css预编译器less)
编写css时,受限于css语言本身,常常难以处理一些问题:由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题,其中一种方案,便是。预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为可被浏览器识别的传统css代码。目前,最流行的预编译器有less和sass。原创 2024-02-19 08:31:40 · 325 阅读 · 0 评论 -
前端工程化之:webpack3-5(css module)
通过命名规范来限制类名太过死板,而 css in js 虽然足够灵活,但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题。原创 2024-02-06 10:43:34 · 1592 阅读 · 0 评论 -
前端工程化之:webpack3-4(css in js)
css in js 的核心思想是:用一个 JS 对象来描述样式,而不是 css 样式表。例如下面的对象就是一个用于描述样式的对象:原创 2024-02-06 10:42:16 · 177 阅读 · 0 评论 -
前端工程化之:webpack3-3(BEM)
BEM 是一套针对 css 类样式的命名方法。其他命名方法还有: OOCSS 、 AMCSS 、 SMACSS 等等。一个完整的 BEM 类名: block__element_modifier ,例如: banner__dot_selected ,可以表示:轮播图中,处于选中状态的小圆点。原创 2024-02-05 08:42:23 · 279 阅读 · 0 评论 -
前端工程化之:webpack3-2(利用webpack拆分css)
要拆分 css ,就必须把 css 当成像 js 那样的模块;要把 css 当成模块,就必须有一个构建工具( webpack ),它具备合并代码的能力而 webpack 本身只能读取 css 文件的内容、将其当作 JS 代码进行分析,因此,会导致错误。于是,就必须有一个 loader ,能够将 css 代码转换为 js 代码。原创 2024-02-05 08:36:54 · 562 阅读 · 0 评论 -
前端工程化之:webpack3-1(css工程化概述)
当你写一个 css 类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?你会发现,怎么都不好。一旦样式多起来,这个问题就会变得越发严重,其实归根结底,就是类名冲突不好解决的问题。原创 2024-02-04 13:02:13 · 1163 阅读 · 0 评论 -
前端工程化之:webpack2-2(内置插件)
所有的webpack内置插件都作为 webpack 的静态属性存在的,使用下面的方式即可创建一个插件对象原创 2024-02-03 13:08:32 · 625 阅读 · 0 评论 -
前端工程化之:webpack2-1(常用扩展)
每次打包后不会再次生成新的文件,而是对原来打包的文件进行更新。原创 2024-02-02 08:49:51 · 573 阅读 · 0 评论 -
前端工程化之:webpack1-11(其他配置)
该配置会影响入口和 loaders 的解析,入口和 loaders 的相对路径会以 context 的配置作为基准路径,这样,你的配置会独立于 CWD (current working directory 当前执行路径)。原创 2024-02-02 08:48:59 · 1326 阅读 · 0 评论 -
前端工程化之:webpack1-10(区分环境)
有些时候,我们需要针对生产环境和开发环境分别书写 webpack 配置。为了更好的适应这种要求, webpack 允许配置不仅可以是一个对象,还可以是一个函数。原创 2024-02-01 08:46:06 · 531 阅读 · 0 评论 -
前端工程化之:webpack1-9(plugin)
loader 的功能定位是转换代码,而一些其他的操作难以使用 loader 完成,比如:当 webpack 生成文件时,顺便多生成一个说明描述文件当 webpack 编译启动时,控制台输出一句话表示 webpack 启动了当 xxxx 时, xxxx这种类似的功能需要把功能嵌入到 webpack 的编译流程中,而这种事情的实现是依托于 plugin 的。plugin 的本质是一个带有 apply 方法的对象。通常,习惯上,我们会将该对象写成构造函数的模式。原创 2024-02-01 08:45:40 · 872 阅读 · 0 评论 -
前端工程化之:webpack1-8(loader)
webpack 做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。更多的功能需要借助 webpack loaders (加载器)和 webpack plugins (插件)完成。原创 2024-01-29 08:36:27 · 603 阅读 · 0 评论 -
前端工程化之:webpack1-7(入口和出口)
出口:这里的出口是针对资源列表的文件名或路径的配置。出口通过 output 进行配置。入口:入口真正配置的是 chunk。入口通过 entry 进行配置。原创 2024-01-29 08:36:06 · 1428 阅读 · 0 评论 -
前端工程化之:webpack1-6(编译过程)
初始化时我们运行的命令 webpack 为核心包, webpack-cli 提供了 webpack 命令,通过命令启动 webpack ,webpack 命令就是在调用核心包里面的功能。原创 2024-01-26 08:53:18 · 1739 阅读 · 1 评论 -
前端工程化之:webpack1-5(配置文件)
webpack提供的cli支持很多的参数,例如--mode,但更多的时候,我们会使用更加灵活的配置文件来控制webpack的行为。默认情况下,webpack会读取文件作为配置文件,但也可以通过CLI参数--config来指定某个配置文件。配置文件中通过CommonJs模块导出一个对象,对象中的各种属性对应不同的webpack配置。nodenodeCommonJS当命令行参数与配置文件中的配置出现冲突时,以为准。原创 2024-01-25 08:43:19 · 896 阅读 · 0 评论 -
前端工程化之:webpack1-4(编译结果分析)
webpack 会假定项目的入口起点为 src/index.js ,然后会在 dist/main.js输出结果,并且在生产环境开启压缩和优化。我们要分析的就是 main.js 文件。原创 2024-01-25 08:36:07 · 437 阅读 · 0 评论 -
前端工程化之:webpack1-3(模块化兼容性)
由于 webpack 同时支持 CommonJs 和 ES6 module ,因此需要理解它们互操作时 webpack 是如何处理的。原创 2024-01-24 08:43:03 · 553 阅读 · 1 评论 -
前端工程化之:webpack1-2(安装与使用)
webpack 是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。原创 2024-01-24 08:42:35 · 675 阅读 · 1 评论 -
前端工程化之:webpack1-1(构建工具)
JSJSES6npm这些仅仅是前端工程化的一个缩影。等等等等,我们将这些问题称之为工程问题。工程问题与业务无关,但它深刻的影响到开发进度,如果没有一个好的工具解决这些问题,将使得开发进度变得极其缓慢,同时也让开发者陷入技术的泥潭。原创 2024-01-23 13:25:57 · 476 阅读 · 1 评论 -
前端工程化之:CSS工程化+Less
Less 是一种更加简洁的样式代码,它非常像 CSS ,但又不太一样,它让编写样式变得更容易。Less 代码虽好,但它无法被浏览器识别,因此需要一个工具将其转换为纯正的 CSS 代码。由于 node 环境具有读写文件的能力,于是在 node 环境中可以轻松的完成文件的转换。原创 2024-01-23 13:25:37 · 1261 阅读 · 1 评论 -
前端工程化之:包管理器处理
包 package 是一个或多个js模块的集合,它们共同完成某一类功能。可以简单的认为每一个工程就是一个包。有些包是为了给别人用的,这种包也叫第三方库。原创 2024-01-21 19:45:22 · 487 阅读 · 1 评论 -
前端工程化之:ES Module
ES Module分为两种导出方式:具名导出(普通导出):可以导出多个默认导出:只能导出一个一个模块可以同时存在两种导出方式,最终会合并为一个对象导出。原创 2024-01-19 10:53:29 · 970 阅读 · 1 评论 -
前端工程化之:CommonJS
前端主要有两大模块化标准:CommonJS,简称CMJ,这是一个社区规范,出现时问较早,目前仅node环境支持;ES Module,简称ESM,这是随着ES6发布的官方模块化标准,目前浏览器和新版本node环境均支持。原创 2024-01-19 08:34:48 · 529 阅读 · 1 评论