缘起 平时写惯了业务代码之后，如果想要了解下 webpack 或者 vue-cli，好像是件很难上手的事情? 。拿 webpack 来说，我们可能会对配置熟悉点，但常常一段时间过后又忘了，感觉看起来不
https://github.com/luoxue-victor/learn_webpack/
webpack 的作用是根据入口文件将源代码编译（构建、打包）成最终代码。中间经过webpack打包，打包的过程就是编译
https://juejin.cn/post/6961203055257714702
为了优化首屏加载渲染速度，减小首屏包体积，项目中很多代码是通过懒加载动态导入（dynamic import）的。
当我想使用纱线运行安可开发时为什么我有这个错误？当我想添加sass时，我得到警告“> sass-loader@6.0.7”有未满足的对等依赖“webpack@^2.0.0 || ^ 3.0.0 || ^ 4.0.0” . 但为什么 ？ Symfony 4.我无法从github安装这个模块npm install –save child_process fork-ts-checker-webpack-plugin fs module net readline spdx-exceptions spdx-license-ids spdx-license-ids / deprecated
yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置
题图：Pixabay 这个项目开始之初，赶时间上线。很多地方基本没怎么管代码规范，直到一期完毕回过头来看之前写的代码，不忍直视。为了之后接手的人能更加轻松，也为了自己之后debug更加顺手，边开始二期的部分需求，边重构一期的部分代码，还是有部分收获。 项目技术栈是： nodejs javascript react redux react-router webpack 之前的架构是react-router2，后面换成了react-router4。代码看起来更加的模块化。 入口模块化 项目本身是一个系统合集
在使用 webpack 的时候，很常见的一个构建优化手段就是缩小构建目标。比如在构建阶段只构建 src 里面的模块代码，对于 node_modules 里面所引入的三方包不进行构建操作。
由于没有提前做好复习，所以有点匆忙，腾讯一面问的不难，从vue，react，webpack等等，倒是没准备好，导致回答的满头大汗~~
很久之前就遇到过这个问题，一直在造轮子，难免会遇到一些库需要放图片作为背景图，上次是作为内联base64解决这个问题，但是也没有追寻为什么。这次又遇到了这个问题，应该仔仔细细弄个清楚，并花时间整理记录一下。
早期，webpack 的目的是允许在浏览器中运行大多数 node.js 模块，但是模块整体格局发生了变化，现在许多模块的主要用途是以编写前端为目的。webpack <= 4 附带了许多 Node.js 核心模块的 polyfil，一旦模块中使用了任何核心模块（即 ”crypto“ 模块），这些模块就会被自动启用。
本文主要探讨了 Webpack Tree Shaking 的基本概念，而非深入其底层代码实现。相关的代码示例可以在 这里[1] 查看。
最近在 medium 上看到这篇“比较新鲜的”文章 《We rendered a million web pages to learn how the web breaks》 觉着不错（老外确实敢想敢做），遂翻译分享，以期拓宽视野、引人思考。本瓜不会去逐字翻译，旦求一个表意流畅。其间也会或加入自己的看法，或引用其它。总之，事儿就是这么个事儿，希望您喜欢~
webpack本身并不难，他所完成的各种复杂炫酷的功能都依赖于他的插件机制。或许我们在日常的开发需求中并不需要自己动手写一个插件，然而，了解其中的机制也是一种学习的方向，当插件出现问题时，我们也能够自己来定位。
我们都经常遇到这个情况，在 Web 项目目录结构划分得细致之后，从某个子组件引用公共模块时，如果使用准确的相对路径，路径可能会变得相当长：
由于 Windows 和 Mac 原生的应用程序开发难度比较大，所以使用 Electron 版 TRTC 的能力就成了一个不错的选择。不过由于国内网络环境比较复杂，而 Electron 的很多开发资源由位于境外服务器上，所以很多客户在初次对接时会遇到很多的环境配置问题。
Lighthouse 是用于测试网页性能工具最有用的技术之一。它具备了自动化，并可以测量网站的可访问性和 SEO。更重要的是，它目前是开源的并且可以免费使用。同时，它可以用来测试渐进式 Web 应用程序。
框架设计远没有大家想的那么简单，并不是说只把功能开发完成，能用就算完事儿了，这里面还是有很多学问的。比如说，我们的框架应该给用户提供哪些构建产物？产物的模块格式如何？当用户没有以预期的方式使用框架时是否应该打印合适的警告信息从而提升更好的开发体验，让用户快速定位问题？开发版本的构建和生产版本的构建有何区别？热跟新（HMR：Hot Module Replacement）需要框架层面的支持才行，我们是否也应该考虑？再有就是当你的框架提供了多个功能，如果用户只需要其中几个功能，那么用户是否可以选择关闭其他功能从而减少资源的打包体积？所有以上这些问题我们都会在本节内容进行讨论。
从Vite 4.4开始，Vite实验性地支持Lightning CSS。你可以通过在你的配置文件中添加 css.transformer: 'lightningcss' 来选择它，并安装可选的lightningcss依赖：
1 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
前提： 首先，这个教程主要针对vue小白，并且不知道安装node.js环境的。言归正传，下面开始教程：在维护项目之前，需要把所有的环境搭建好，这里我就不多说了，看这篇就够了：十分钟上手-搭建vue开发环境（新手教程）https://www.jianshu.com/p/0c6678671635
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
前言 今天刚写完一个需求准备打包测试，眼看着进度快跑满了啪的一下给我来了一个错，如下图: 简单分析 Failed to minify the bundle看了下大概的错讲的应该是压缩代码报错了，而Ug
作用域是一套用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找的规则。
前言 硬核的哪吒，我的命由我不由天。 目录 个人的面试经历 当作为考官我会考问你的面试重点 个人收集大厂面试题库（含答案） 面试时的小技巧 整理的知识体系（个人重点内容） 对于有面试需求的朋友，需要的帮助 所谓令人心动的offer即是让你心仪的，想要的，所追求的，如果你是社会人士，想起当年面试的自己有过哪些的经历呢？是否遗憾在🏫学校时不曾坚持努力的自己？如果你是在校生，你会面临出校后的一场面试，是否已经准备👌好了呢？ 面试如同考试，检验你的知识点是否已经牢牢掌握，一次面试的成功会让你对自己充满信心，也许大
之前学习的时候，都会看到网络上一些在线工具的网站，比如获取时间戳，编码转化，正则表达式等等，这些对于一些初学者在电脑上没有安装相对应的工具，往往就会百度搜索在线工具，然后就能实现自己所要完成的目的。
前言 这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。 正文 首先，我们来说一下安装的东西吧！处于有头有尾的目的，还是几句话草草了事。步骤如下： 安装vue-cli 以webpack模版安装目录 这样之后，我们就可以使用IDE打开目录了。 此处注明我的vue-cli的版本2.9.2，以免之后改版之后，误导读者。 之后，附上自己的目录截图，并没有做改动，如图： 'use strict' constpath=requir
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
通过一个demo带你深入进入webpack@4.46.0源码的世界，分析构建原理，专栏地址，共有十篇。
在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度绑定在webpack中的方法，我们也可以借助其他的构建工具来实现，比如rollup、vite、rspack等等。
前言 今天刚写完一个需求准备打包测试，眼看着进度快跑满了啪的一下给我来了一个错，如下图: [20190523155118.png] 简单分析 Failed to minify the bundle看了下大概的错讲的应该是压缩代码报错了，而Uglifyjs确实也是webpack打包压缩的插件。 看下一行，大概讲的是index.295edf21.js文件的第264048行报的错。找到我们打出的包的文件夹 [20190523155204.png] 使用nodepad++打开找到相应行数 [201905231552
「由于链接无法跳转，请点击阅读原文查看详情喔，记得给bruce-cli一个Star」
有些针对 @vue/cli 的全局配置，例如你惯用的包管理器和你本地保存的 preset，都保存在 home 目录下一个名叫 .vuerc 的 JSON 文件。你可以用编辑器直接编辑这个文件来更改已保存的选项。
题目的答案提供了一个思考的方向，答案不一定正确全面，有错误的地方欢迎大家请在评论中指出，共同进步。
一、前言 最近正好在学习 Webpack，觉得 Webpack 这种通过构建模块依赖图来打包项目文件的思想很有意思，于是参考了网上的一些文章实现了一个简陋版本的 mini-webpack，通过入口文件将依赖的模块打包在一起，生成一份最终运行的代码。想了解 Webpack 的构建原理还需要补充一些相关的背景知识，下面一起来看看。 二、背景知识 1. 抽象语法树（AST） 什么是抽象语法树？ 平时我们编写程序的时候，会经常在代码中根据需要 import 一些模块，那 Webpack 在构建项目、分析依赖的时候是
说到web前端开发高级，必须要掌握的是HTML和css代码的优化，前端优化很重要，这是成功你进阶的道路上需要重视的知识点，面对代码优化，首先我们要学习的就是前端命名规范，HTML代码优化，和css代码优化。
之前写的《webpack性能优化(0):webpack性能优化概况-优化构建速度》、《webpack性能优化(1):分隔/分包/异步加载+组件与路由懒加载》
报错是因为Vite打包的项目使用了ES模块（ES modules）。ES模块是一种在JavaScript中用于模块化的标准，它允许开发者将代码分割成多个模块，使得代码更易于组织、维护和重用。然而，ES模块有一个限制，即在浏览器中加载的模块文件（通常以.js或.mjs为扩展名）的顶层代码不能被修改。这个限制是为了确保代码的安全性和稳定性，防止在运行时对模块的代码进行意外修改导致不可预测的行为。
工程化，可以理解为使用一些方式，去改良然后提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效率，且更好地做产品交付。
[011ead2e167b86d1d4def84147fbbdf6c6bb1c01.jpg] 最近看到掘金、前端公众号好多 ES2020 的文章，想说一句：放开我，我还学得动！ 先问大家一句，日常项目开发中你能离开 ES6 吗？ 一、前言 对于前端同学来说，编译器可能适合神奇的魔盒🎁，表面普通，但常常给我们惊喜。 编译器，顾名思义，用来编译，编译什么呢？当然是编译代码咯🌹。 [20191125-144728-7a47.gif] 其实我们也经常接触到编译器的使用场景： React 中 JSX 转换成
随着前端技术的火热发展，工程化，模块化和组件化的思想已逐步成为主流，与之相应的，就需要有一整套工具流可以支撑起它。
原文链接：https://github.com/youngwind/blog/issues/98
先问大家一句，日常项目开发中你能离开 ES6 吗？ 一、前言 对于前端同学来说，编译器可能适合神奇的魔盒?，表面普通，但常常给我们惊喜。 编译器，顾名思义，用来编译，编译什么呢？当然是编译代码咯?。
引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库，写了一段时间想深入学习 React，有个想法想做个 demo 练手下，那时候其实还没想好要做哪一个类型的，也看
https://juejin.im/post/5e3d898cf265da5732551a56
Vue作为单页面应用遇到最棘手的问题是首屏加载时间的问题，单页面应用会把页面脚本打包成一个文件，这个文件包含着所有业务和非业务的代码，而脚本文件过大也是造成首页渲染速度缓慢的原因。因此作为首屏性能优化的课题，最常用的处理方法是对文件的拆分和代码的分离。按需加载的概念也是在这个前提下引入的。我们往往会把一些非首屏的组件设计成异步组件，部分不影响初次视觉体验的组件也可以设计为异步组件。这个思想就是按需加载。通俗点理解，按需加载的思想让应用在需要使用某个组件时才去请求加载组件代码。我们借助webpack打包后的结果会更加直观。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
