![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端工程化
文章平均质量分 64
前端工程化
Lvan的前端笔记
十年磨一剑
展开
-
webpack:css代码提取插件extract-text-webpack-plugin和mini-css-extract-plugin
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 等。原创 2023-09-25 17:28:20 · 891 阅读 · 0 评论 -
webpack:关于处理html文件的插件html-webpack-plugin、add-asset-html-webpack-plugin
add-asset-html-webpack-plugin 将 JavaScript或CSS文件添加到由html-webpack-plugin插件生成的HTML中去。原创 2023-09-25 17:28:10 · 794 阅读 · 0 评论 -
webpack:详解cache模块常用配置
webpack:详解cache模块常用配置原创 2023-09-25 15:12:09 · 953 阅读 · 0 评论 -
webpack:使用externals配置来排除打包后的某个依赖&插件IgnorePlugin的使用
webpack:使用externals配置来排查打包后的某个依赖原创 2023-09-25 14:34:57 · 1370 阅读 · 0 评论 -
webpack:详解entry和output一些重要API的使用
webpack:详解entry和output一些重要API的使用原创 2023-09-22 16:29:19 · 543 阅读 · 0 评论 -
webpack:详解代码分离以及插件SplitChunksPlugin的使用
带你了解webpack的代码分离核心配置原创 2023-09-21 16:27:40 · 1763 阅读 · 0 评论 -
webpack配置alias后eslint和ts无法识别
alias报错问题原创 2023-09-18 15:35:56 · 930 阅读 · 0 评论 -
webpack:详解CopyWebpackPlugin,复制的同时修改文件内容
CopyWebpackPlugin 是一个强大的 Webpack 插件,用于将文件从源目录复制到构建目录。在本文中,我们将探讨 CopyWebpackPlugin 的一些常用 API,并提供示例代码。在构建 Web 应用程序时,通常需要将一些静态文件(如 HTML、CSS、图片等)从源目录复制到构建目录。为了实现这一功能,我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录,并且可以自定义复制行为。原创 2023-09-16 22:24:22 · 3846 阅读 · 1 评论 -
webpack:css-loader和style-loader关系
webpack:css-loader和style-loader关系原创 2023-09-13 18:39:24 · 448 阅读 · 0 评论 -
webpack:系统的了解webpack一些核心概念
webpack:系统的了解webpack一些核心概念原创 2023-09-13 18:15:21 · 369 阅读 · 0 评论 -
详解vite原理
带你初步了解vite原理原创 2023-03-06 15:05:05 · 522 阅读 · 0 评论 -
前端构建工具大盘点:gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc
前端构建工具大盘点:gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc原创 2023-03-03 11:23:20 · 6082 阅读 · 3 评论 -
webpack的热重载/热更新HMR是如何实现的
浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。:热更新/热重载/HMR(Hot Module Replacement):加快开发速度,所以只适用于开发环境下使用。平时使用HMR的时候,我都会有这样的疑惑?原创 2022-10-24 18:46:23 · 1429 阅读 · 0 评论 -
web端自动化部署方案
背景为了提高发布效率,践行DevOps,我们使用 gitlab 的 CI 工具作为我们前端项目的自动化部署方案。集成后的开发&发布模式发布测试环境:代码提交到test分支自动发布。发布正式环境:将test代码合并到master分支自动发布。集成CI/CD思路集成步骤1、集成ci脚本# test、preview和master分支默认支持线上部署# develop分支默认是开发分支,不建议(禁止)触发CI/CD流程,姑不作为默认触发部署分支stages: - instal原创 2021-01-30 23:52:10 · 912 阅读 · 3 评论 -
小程序:自动化部署方案
小程序集成CI/CD可以让我们在发布流程,版本控制上得到更好的体验。主要有以下几点优势:小程序的发布版本必定和gitlab的代码版本保持一致解决多人开发时需要频繁切换体验版,提升发布效率解决上线前提审版本后需要切回体验版的问题根据约定的小程序版本命名规范,可以追踪到具体的代码版本集成CI/CD思路打包小程序借助小程序官方提供的 miniprogram-ci 中的脚本调用方式,结合gitlab ci执行对应的发布脚本。a. 执行脚本时需要传版本参数、指定发布机器人、描述说明(这里我们将原创 2021-01-30 23:49:46 · 1809 阅读 · 0 评论 -
基于vue/cli的前端脚手架
vue/cli原创 2020-10-24 19:50:02 · 189 阅读 · 0 评论 -
手撸一个前端脚手架
背景我们要为团队做一个项目脚手架,一般的脚手架就是初始化的时候会问你一些问题,然后根据你的回答生成一个项目模板,今天我们来实现一下。需要的包必须:inquirer:用于向用户提出问题和获取回答child_process:用于执行命令行的指令commander:用于定义自己的命令download-git-repo:负责下载对应模板项目的git仓库fs-extra:负责文件的复制mem-fs:如下mem-fs-editor:负责模板的复制以及嵌入模板字符串,它需要依赖mem-fs可选:原创 2020-10-19 16:51:16 · 204 阅读 · 0 评论 -
npm:使用npm link来调试本地的包
背景当你开发一个 npm 包想要调试它的时候,如果一次次的发布到 npm 仓库,然后再安装调试,这是很麻烦的。我们可以通过 npm link 命令来在本地进行调试。npm linknpm link 命令可以将一个任意位置的npm包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该npm包。这个命令主要做了两件事:为npm包目录创建软链接,将其链到 {prefix}/lib/node_modules/<package>为可执行文件(bin)创建软链接,将其链到 {prefi原创 2020-10-08 18:38:00 · 4497 阅读 · 0 评论 -
前端工程化:js-beautify格式化代码
官网githubvscode 插件搜索 Beautify美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。VS Code在内部使用js-beautify,但缺乏修改您希望使用的样式的能力。此扩展允许在VS Code中运行js-beautify,并尊重.jsbeautifyrc打开文件的路径树中的任何文件以加载您的代码样式。与 F1 Beautify(美化选择)或F1一起运行 Beautify file。...原创 2020-09-17 19:41:50 · 2655 阅读 · 0 评论 -
前端工程化:vscode格式化vue代码
步骤安装 vscode 插件 vetur、stylelint项目根目录创建文件 .vscode/settings.json写入配置文件// #每次保存的时候将代码按eslint格式进行修复,要在保存时运行的代码操作类型。保存时按照哪个规则进行格式化"editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.stylelint": true},...原创 2020-09-17 18:18:28 · 315 阅读 · 0 评论 -
前端工程化:wepy配置vscode代码格式化
步骤安装插件 vetur-wepy项目根目录创建文件 .vscode/settings.json写入配置文件{ // 修改编辑器默认格式化方案,也就是右键format Document width里面的默认 "editor.defaultFormatter": "hu2ren.vetur-wepy", "vetur.validation.script": false, "vetur.validation.interpolation": false, "vetur.valida原创 2020-09-17 17:46:43 · 656 阅读 · 0 评论 -
前端工程化:代码格式化插件prettier
vscode插件原创 2020-09-17 15:50:33 · 749 阅读 · 0 评论 -
前端工程化:vue代码检查工具vetur
vscode插件格式化代码、高亮、代码格式检测、自带Emment、括号自动补全,专为vue而生原创 2020-09-17 15:46:58 · 1796 阅读 · 0 评论 -
前端工程化:CSS检测工具stylelint
以后再更以后再更官网VScode插件作用校验css,格式化css代码,有postcss提供原创 2020-09-17 15:35:29 · 220 阅读 · 0 评论 -
webpack优化:使用 DllPlugin
用过 Windows 系统的人应该会经常看到以 .dll 为后缀的文件,这些文件称为动态链接库,在一个动态链接库中可以包含给其他模块调用的函数和数据。要给 Web 项目构建接入动态链接库的思想,需要完成以下事情:把网页依赖的基础模块抽离出来,打包到一个个单独的动态链接库中去。一个动态链接库中可以包含多个模块。当需要导入的模块存在于某个动态链接库中时,这个模块不能被再次被打包,而是去动态链接库中获取。页面依赖的所有动态链接库需要被加载。打包后生成的文件包括:动态链接库文件中包含了大量模块的代码原创 2020-09-04 18:37:07 · 336 阅读 · 0 评论 -
webpack优化:总结
文章目录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原创 2020-09-04 16:43:57 · 156 阅读 · 0 评论 -
前端工程化:eslint在项目中的使用
配置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 },原创 2020-08-06 17:41:52 · 1322 阅读 · 0 评论 -
前端工程化:详解项目根目录下的.editorconfig
官网作用:帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。实例文件# 告诉EditorConfig插件,这是根文件,不用继续往上查找root = true# 匹配全部文件[*]# 结尾换行符,可选"lf"、"cr"、"crlf"end_of_line = lf# 在文件结尾插入新行insert_final_newline = true# 删除一行中的前后空格trim_trailing_whitespace = true# 匹配js和py结尾的文件[*.{js,py}原创 2020-08-06 15:26:57 · 417 阅读 · 0 评论