分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

不是“谁对谁错”，而是“不同阶段最优解不同”。这是现在 React/Vue 圈最流行方案。✅ node_modules 优化。就是典型 monorepo 场景。“既然高度耦合，那就别拆了。Monorepo 也不是银弹。前端工程化这十年的核心演变。我给你讲真正的底层逻辑。所以需要 Lerna。✅ link 本地包。比 npm 快很多。上百 package。组件库 + 业务系统。

webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack 4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件（从css文件中提取css代码到单独的文件中，对css代码进行代码压缩等）。替代extract-text-webpack-plugin 进行资源提取。提取静态资源 css 等。

add-asset-html-webpack-plugin 将 JavaScript或CSS文件添加到由html-webpack-plugin插件生成的HTML中去。

webpack：详解cache模块常用配置

webpack：使用externals配置来排查打包后的某个依赖

webpack：详解entry和output一些重要API的使用

带你了解webpack的代码分离核心配置

alias报错问题

CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。在本文中，我们将探讨 CopyWebpackPlugin 的一些常用 API，并提供示例代码。在构建 Web 应用程序时，通常需要将一些静态文件（如 HTML、CSS、图片等）从源目录复制到构建目录。为了实现这一功能，我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录，并且可以自定义复制行为。

webpack：css-loader和style-loader关系

webpack：系统的了解webpack一些核心概念

带你初步了解vite原理

前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc

浏览器的无刷新更新，允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面。：热更新/热重载/HMR（Hot Module Replacement）：加快开发速度，所以只适用于开发环境下使用。平时使用HMR的时候，我都会有这样的疑惑？

背景为了提高发布效率，践行DevOps，我们使用 gitlab 的 CI 工具作为我们前端项目的自动化部署方案。集成后的开发&发布模式发布测试环境：代码提交到test分支自动发布。发布正式环境：将test代码合并到master分支自动发布。集成CI/CD思路集成步骤1、集成ci脚本# test、preview和master分支默认支持线上部署# develop分支默认是开发分支，不建议(禁止)触发CI/CD流程,姑不作为默认触发部署分支stages: - instal

小程序集成CI/CD可以让我们在发布流程，版本控制上得到更好的体验。主要有以下几点优势：小程序的发布版本必定和gitlab的代码版本保持一致解决多人开发时需要频繁切换体验版，提升发布效率解决上线前提审版本后需要切回体验版的问题根据约定的小程序版本命名规范，可以追踪到具体的代码版本集成CI/CD思路打包小程序借助小程序官方提供的 miniprogram-ci 中的脚本调用方式，结合gitlab ci执行对应的发布脚本。a. 执行脚本时需要传版本参数、指定发布机器人、描述说明（这里我们将

vue/cli

背景我们要为团队做一个项目脚手架，一般的脚手架就是初始化的时候会问你一些问题，然后根据你的回答生成一个项目模板，今天我们来实现一下。需要的包必须：inquirer：用于向用户提出问题和获取回答child_process：用于执行命令行的指令commander：用于定义自己的命令download-git-repo：负责下载对应模板项目的git仓库fs-extra：负责文件的复制mem-fs：如下mem-fs-editor：负责模板的复制以及嵌入模板字符串，它需要依赖mem-fs可选：

背景当你开发一个 npm 包想要调试它的时候，如果一次次的发布到 npm 仓库，然后再安装调试，这是很麻烦的。我们可以通过 npm link 命令来在本地进行调试。npm linknpm link 命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。这个命令主要做了两件事：为npm包目录创建软链接，将其链到 {prefix}/lib/node_modules/<package>为可执行文件(bin)创建软链接，将其链到 {prefi

官网githubvscode 插件搜索 Beautify美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。VS Code在内部使用js-beautify，但缺乏修改您希望使用的样式的能力。此扩展允许在VS Code中运行js-beautify，并尊重.jsbeautifyrc打开文件的路径树中的任何文件以加载您的代码样式。与 F1 Beautify（美化选择）或F1一起运行 Beautify file。...

步骤安装 vscode 插件 vetur、stylelint项目根目录创建文件 .vscode/settings.json写入配置文件// #每次保存的时候将代码按eslint格式进行修复，要在保存时运行的代码操作类型。保存时按照哪个规则进行格式化"editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.stylelint": true},...

步骤安装插件 vetur-wepy项目根目录创建文件 .vscode/settings.json写入配置文件{ // 修改编辑器默认格式化方案，也就是右键format Document width里面的默认 "editor.defaultFormatter": "hu2ren.vetur-wepy", "vetur.validation.script": false, "vetur.validation.interpolation": false, "vetur.valida

vscode插件

vscode插件格式化代码、高亮、代码格式检测、自带Emment、括号自动补全，专为vue而生

以后再更以后再更官网VScode插件作用校验css，格式化css代码，有postcss提供

用过 Windows 系统的人应该会经常看到以 .dll 为后缀的文件，这些文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据。要给 Web 项目构建接入动态链接库的思想，需要完成以下事情：把网页依赖的基础模块抽离出来，打包到一个个单独的动态链接库中去。一个动态链接库中可以包含多个模块。当需要导入的模块存在于某个动态链接库中时，这个模块不能被再次被打包，而是去动态链接库中获取。页面依赖的所有动态链接库需要被加载。打包后生成的文件包括：动态链接库文件中包含了大量模块的代码

文章目录1. 优化开发体验1.1 优化构建速度1.1.1 缩小文件搜索范围1.1.2 缩小文件搜索范围1.1.3 使用 HappyPack1.1.4 使用 ParallelUglifyPlugin1.2 优化使用体验1.2.1 使用自动刷新1.2.2 开启模块热替换2. 优化输出质量2.1 减少用户能感知到的加载时间2.1.1 区分环境2.1.2 压缩代码2.1.3 CDN 加速2.1.4 使用 Tree Shaking2.1.5 提取公共代码2.1.6 按需加载2.2 提升流畅度2.2.1 使用 Prep

配置npm install eslint --save-dev// 置一个配置文件./node_modules/.bin/eslint --init// 你可以在任何文件或目录上运行ESLint如下./node_modules/.bin/eslint yourfile.js生成的.eslintrc.json{ "env": { "browser": true, "commonjs": true, "es6": true },

官网作用：帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。实例文件# 告诉EditorConfig插件，这是根文件，不用继续往上查找root = true# 匹配全部文件[*]# 结尾换行符，可选"lf"、"cr"、"crlf"end_of_line = lf# 在文件结尾插入新行insert_final_newline = true# 删除一行中的前后空格trim_trailing_whitespace = true# 匹配js和py结尾的文件[*.{js,py}