我们知道，Webpack 是使用 loader 转换代码的，而 Vite/Rollup 则是使用插件转换代码，那这两种机制有什么差异呢？我们用 Vue 的转换来说明一下。
在做一些新的项目时考虑使用 Vite、Vuejs、Less、TypeScript 这些依赖库的构建项目基础，在编写组件时使用 TSX 来获得更好的类型体验，其中在 Less 模块的使用遇到了一个很好解决但初次遇到感觉又无从下手的坑，看我是怎么陷进去的~
Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ 写作背景： 现在其实做的不错的开源 UI 库有很多，我还没有真正的实践过多造一个轮子也没太大必要，但是学习编写的思路和过程还是很有必要的，正好看到慕课的一个视频就顺便总结一下组件库开发的流程，顺便熟悉一个打包的配置和流程。 搭建基础结构： 使用VueCli创建默认模板： 创建名为it200-ui的项目：vue create it200-ui； 使用默认Vue2模板即可，我们只考虑搭建UI库的思路不考虑
笔者之前的文章里介绍过一个代码在线编辑预览工具的实现，实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。
1、 什么是CSS预处理器 CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。 2、lang 因此lang的属性可选：scss（sass）、less等等 即：<style lang="scss"> 3、scss和sass的区别 scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。 注明：使用这个lang的属性需要安装scss（sass） 4、scoped属性 scoped是指定样式的局部作用域。 在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。
通常我们会使用vue-cli来创建一个vue项目，由于vue-cli对常见的开发需求进行了预先配置，做到了开箱即用。但是阻碍碍我们窥探其真面目脚步。当然官方也提供了手动配置的方案。参考
默认 webpack 只能处理 js 文件，如果在 js 文件中导入了 css 代码：
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块，模块间可以互相依赖（require or import），webpack 的功能是把相互依赖的文件打包在一起。webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。同时，webpack还有丰富的插件 plugin，可以完成例如js,css的压缩，公共依赖模块的提取和注入，甚至利用模板对 h
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范.
安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的)
vue-loader是用于webpack的加载器，允许你用叫做Single-File Components单文件组件的格式来写Vue组件
CSS Module 在打包的时候会将类名转换成带有hash值的新类名，根据命名规矩，从而杜绝css类名冲突的问题。
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
市面上的前端框架中，Vue+Cesium 可谓是最佳搭档，一般做 Cesium B 端产品的公司都会使用 Vue，所以后续内容都将基于 Vue
左图项目结构为vue-cli 2x版本脚手架生成的项目,build文件夹包含了webpack配置
实例化 Vue 时，需要传入一个选项对象，它可以包含数据（data），模板（template），挂载元素（el），方法（methods）与生命周期钩子函数（created，mounted...）等选项。下面是一个真实项目中定义的Vue实例：
webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用的最多，不过对于很多人来说，vue-cli 的配置还是过于复杂，对于我们了解细节实现不是很好，所以想自己从零开始搭建一个模板工程，也顺便重新认识一下webpack和vue工程化。
Web前端的组件技术刷新真的是日新月异，前段时间看到很多童鞋分享了webpack的使用，刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式，做模块分离并且又不需要引入重量级的第三方库或组件，也不需要太繁琐的流程（毕竟只是个小工具）。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与 PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由 Ryan Dahl 开发，实质是对 Chrome V8 引擎进行了封装。 Node 对一些特殊用例进行优化，提供替代的 API，使得 V8 在非浏览器环境下运行得更好。V8 引擎执行 Javascript 的速度非常快，性能非常好。Node 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：
在最基本的层次上，使用Vite进行开发与使用静态文件服务器没有太大区别。但是，Vite对本机ESM导入提供了许多增强功能，以支持通常在基于捆绑程序的设置中常见的各种功能。
当前，前后端分离大行其道，我本人之前不少项目也是纯前后端分离，但总有些场景，春前后端分离整起来比较痛苦，比如我手头这个公众号项目吧，它涉及到第三方鉴权，第三方凭证，以及微信凭证这些，都不适合放到前端去做，外加一些本身业务层面的认证授权，这些终归是放服务端处理合适一些的。另一层面原因，是不想系统所有功能全怼到一个SPA中，还是希望不同功能模块，去拆分到不同页面中的， 俗称的多页。
1. 在 webpack 中配置 .vue 组件页面的解析 运行cnpm i vue -S将 vue 安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D将解析转换 vue 的包安装为开发依赖； 运行cnpm i style-loader css-loader -D将解析转换 CSS 的包安装为开发依赖，因为 .vue 文件中会写 CSS 样式； 在webpack.config.js中，添加如下module规则： module: { rules
vue-loader 是一个用于将 Vue 单文件组件（.vue 文件）转换为 JavaScript 模块的 webpack 加载器（loader）。是 Vue.js 生态系统中的一部分，用于在开发过程中编译和处理 Vue 组件。
loader加载器是webpack的核心之一，其用于将不同类型的文件转换为webpack可识别的模块，即用于把模块原内容按照需求转换成新内容，用以加载非js模块，通过配合扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果，从而完成一次完整的构建。
我们用这三个维度分析下Vue的SFC（Single-File-Component，单文件组件）：
1：浏览器兼容，浏览器兼容一直是前端开发头疼的事情，各种版本型号的浏览器，相互兼容，调试，往往都会让很多人心力憔悴。
众所周知，在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x，同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。注：本文中使用的vue版本为3.4.19，@vitejs/plugin-vue的版本为5.0.4。
vue2的时候想必大家有遇到需要在style模块中访问script模块中的响应式变量，为此我们不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量，这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量。注：本文中使用的vue版本为3.4.19。
Rollup 设计之初就是面向 ES Module 的，构建出结构扁平，性能出众的类库。
一、ES6的模块化 1. ES6模块化规范 每个 js 文件都是一个独立的模块 导入模块成员使用 import 关键字 暴露模块成员使用 export 关键字 2. 基本语法 发使用 ex
为了方便也可以这么写，使用 npm run 命令这个命令执行的时候默认会把 node_modules 的.bin 文件放到全局上，执行之后销毁npm run buildnpm run dev
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
前言 在http1的时代，比较常见的一种性能优化就是合并http的请求数量，通常我们会把许多js代码合并在一起，但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了。而如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取，一来可以更好地使用浏览器缓存，再者就是可以提高首屏加载速度，很好提升用户的体验。 核心思想 业务代码和基础库的分离 这个其实很好理解，业务代码通常更新迭代很频繁，而基础库通常
Font-awesome codes for html FontAwesome提示代码段
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1.commonjs只会对require的代码执行一次 之后的require只会直接取其导出值 2.es6 Module动态映射,CommonJs是值拷贝，前者可以支持一定程度的循环依赖，需要由开发保证导入时，已经设置好正确的导出值 3.通过单独加载包内的单独文件，从而减小打包体积 4.当第三方依赖较多时，我们可以用提取vendor的方法将这些模块打包到一个单独的bundle中，以更有效地利用客户端缓存，加快页面渲染速度。 5.webpack指定生成目录： webpack.config.js:配置output的path 6.与loader相关的配置都在module对象中，其中module.rules代表了模块的处理规则 7.两个一般一起使用： css-loader:处理css的加载语法 style-loader:将css插入页面 8.在Webpack中，我们认为被加载模块是resource，而加载者是issuer，可以配置哪个js可以加载css rules: [ { test: /.cssKaTeX parse error: Can't use function '\.' in math mode at position 119: … test: /\̲.̲js/, include: /src/pages/, }, } ], 9.enforce可以强制指定loader的执行顺序，分四种： normal:直接定义的默认 pre：代表它将在所有正常loader之前执行 post：和pre相反，代表它需要在所有loader之后执行 inline ：webpack不推荐使用
以前常常觉得，Vue 文件（单文件组件，Single File Component，SFC）的处理非常复杂，以至于很久一段时间，都不敢接触它，直到我看了 @vite/plugin-vue 的源码，才发现，这个过程并没有多复杂。因为 Vue 已经提供了 SFC 的编译能力，我们只需要站在巨人的肩膀上，简单地组合利用这些能力即可。
在现在的前端开发中，前后分离、模块化、版本控制、文件合并与压缩、mock数据等，是在大前端开发避不开的概念。在开发的时候，以组件的方式分别开发，在部署的时候又将这些代码、图片、样式等资源优雅地合并成模块并以增量、热更新的方式加载到浏览器中，这样的模块化方案一直是前端架构师在解决和优化的焦点之一。
如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再需要用则从缓存中读取...
低代码开发平台（LCDP）是无需编码（0 代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。这两年越来越多的公司和开发人员开始自研低代码平台来达到降本提效的目的。今天和大家分享一下低代码平台开发过程中遇到一个问题和对应的解决思路。
webpack打包原理 1、把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 2、按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 3、webpack.config.js的配置
webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用
webpack3.x 主配置webpack.config.js文件，每个模块的详细信息都有一定的注释，如果有不对的地方，还请指教！
组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
打包成功之后，查看dist目录下的index.html文件是否引用了打包之后的js
hello，大家好，经过上篇文章，相信大家都已经了解了js的红尘往事，但是往事不可追嘛，回顾当下，我们要学习最新的js，誓做前端街最靓的仔~
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
