摘要：
Intro Page Place your introduction and profile here. 阅读全文
posted @ 2023-06-09 12:08
风紧·扯呼
阅读(15)
评论(0)
推荐(0)
摘要：
This is a blog home page demo. To use this layout, you should set both layout: BlogHome and home: true in the page front matter. For related configuration docs, please see blog homepage. 阅读全文
posted @ 2023-06-09 12:07
风紧·扯呼
阅读(6)
评论(0)
推荐(0)
摘要：
express 安装 初始化新项目 npm init -y 安装express npm install express 运行 直接node xxx.js 使用nodemon,可修改后自动重新调用 安装nodemon(需全局安装):npm install -g nodemon 命令：nodemon xxx.js 阅读全文
posted @ 2023-06-09 12:07
风紧·扯呼
阅读(40)
评论(0)
推荐(0)
摘要：
使用nvm切换node版本 卸载本地node cmd 输入where node 到node安装删除整个路径 下载nvm 下载链接 安装多版本node 阅读全文
posted @ 2023-06-09 12:06
风紧·扯呼
阅读(26)
评论(0)
推荐(0)
摘要：
sql.js库的使用 安装 npm install sql.js 使用 const fs = require('fs'); const initSqlJs = require('sql.js/dist/sql-wasm.js'); const path = require('path'); const filebuffer = fs.readFileSync(path.resolve(__dirname, '../ignoreDir/filename.sqlite')); initSqlJs().then(function (SQL) { // Load the db // filebuffer可以不传，传了就是基于这个sqlite文件创建内存 const db = new SQL.Database(filebuffer); db.run("CREATE TABLE users (id, name, phone, address);"); db.run( `INSERT INTO users (id, name, phone, address) VALUES (23, 'John Do 阅读全文
posted @ 2023-06-09 12:05
风紧·扯呼
阅读(785)
评论(0)
推荐(0)
摘要：
信息Frontmatter配置 链接 --- title: 内容标题，默认第一个h1标签，非必填 shortTitle: 短标题，会在导航栏、侧边栏和路径导航中作为首选 icon: edit date: 2022-01-12 category: - Vegetable tag: - red - round star: true sticky: true //是否在文章列表中置顶 --- 阅读全文
posted @ 2023-06-09 12:05
风紧·扯呼
阅读(17)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 12:04
风紧·扯呼
阅读(4)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 12:03
风紧·扯呼
阅读(44)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 12:02
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 12:01
风紧·扯呼
阅读(2)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 12:01
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 12:00
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
md增强 选项卡 链接 Code ::: tabs @tab apple Apple @tab banana Banana @tab:active orange Orange ::: 阅读全文
posted @ 2023-06-09 12:00
风紧·扯呼
阅读(23)
评论(0)
推荐(0)
摘要：
1 阅读全文
posted @ 2023-06-09 11:59
风紧·扯呼
阅读(20)
评论(0)
推荐(0)
摘要：
默认内容 阅读全文
posted @ 2023-06-09 11:59
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
api使用 文档地址 配置 登录百度账号 实名认证 创建应用 进入详情页查看AppKey和SecretKey 接入授权 授权码接入 阅读全文
posted @ 2023-06-09 11:58
风紧·扯呼
阅读(71)
评论(0)
推荐(0)
摘要：
接口相关 表格 // 查询项 searchData: { // 当前页 index: 0, // 每页数据 size: 10, condition: { // 搜索关键词 keyWord: "", platform:"", // 表格头中可下拉筛选的值，多个值按照‘，’拼接 reportStatus:"" } }, 阅读全文
posted @ 2023-06-09 11:58
风紧·扯呼
阅读(6)
评论(0)
推荐(0)
摘要：
aui和vue的区别 区别 aui vue 插槽 无 有 添加组件是否需要重新run 需要 不需要 计算属性在模板上写法 需要添加(),可以在上面传参(不传参不能自动更新) 不需要(),一般不传参 监视器 observers：没有newval和oldval，也无法配置deep和immediate watch：有newval和oldval,可配置deep和immediate ref 无，可以使用find/findAll/closest/parent获取组件对象 有 子传父 this.triggerEvent('get-msg', this.data.msg)// getMsg不能是驼峰 父组件：getMsg(e,val)// 第二个参数是传递的参数 this.$emit('getMsg', this.msg)父组件：getMsg(val)// 第一个参数是传递的参数 v-for 不需要key 需要key 简写 无，需要写完整的v-bind:和v-on: 有 props value:'默认值',还有个observers函数 default:'默认值' ref 无 有 ref 无 有 ref 阅读全文
posted @ 2023-06-09 11:57
风紧·扯呼
阅读(78)
评论(0)
推荐(0)
摘要：
form表单相关 form属性 label-width：表单域标签的宽度（label宽度），默认auto,可设置none(没有label)、xxpx hide-required-asterisk: 隐藏必填字段的红色星号 show-type: 值为detail,所有的表单元素都是禁用 rules: 验证规则 data中定义规则 rules: { name: [ { required: true, message: '请输入活动名称',trigger: 'blur'}, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'} ], area: [ { required: true, message: '请选择活动区域', trigger: 'change'} ], area1: [ { required: true,type:"array", message: '请选择活动区域', trigger: 'change'} ], type: [ { type: 'array',required: true, message: 阅读全文
posted @ 2023-06-09 11:57
风紧·扯呼
阅读(20)
评论(0)
推荐(0)
摘要：
git相关 sdp add操作 源代码管理 更改后面的+，添加到暂存的更改 每个文件下都可以进行操作 img.png commit操作 add操作 消息input填写备注 img.png 阅读全文
posted @ 2023-06-09 11:56
风紧·扯呼
阅读(21)
评论(0)
推荐(0)
摘要：
MBS前端总体架构设计及插件机制介绍 企业级应用 特点 快速响应 快速响应客户需求，满足各企业定制化场景 如何并行开发？版本如何管理？ 稳定性 可持续迭代和升级，并且能够稳定运行 定制功能和标品功能如何取舍和平衡？ 集成与被集成 可以集成第三方系统，也可以被第三方系统集成 SDK如何最小化暴露自身能力？ 如何顺应互联网+趋势？ 阅读全文
posted @ 2023-06-09 11:56
风紧·扯呼
阅读(45)
评论(0)
推荐(0)
摘要：
其他 全局 颜色@--aui-primary-color 阅读全文
posted @ 2023-06-09 11:55
风紧·扯呼
阅读(10)
评论(0)
推荐(0)
摘要：
table相关 阅读全文
posted @ 2023-06-09 11:55
风紧·扯呼
阅读(16)
评论(0)
推荐(0)
摘要：
用户信息 平台 用户名 密码 备注 公司邮箱 hetiantao@zhizhangyi.com He_246810 - 北京git仓库 hetiantao 2N-KGM5B8Q - 南京gitLab hetiantao 2N-KGM5B8Q - ikb.zhizhangyi.com hetiantao UUsafe123 - 北京git仓库 hetiantao 2N-KGM5B8Q - FileStation5 hetiantao hetiantao12345 - 阅读全文
posted @ 2023-06-09 11:54
风紧·扯呼
阅读(18)
评论(0)
推荐(0)
摘要：
项目部署到服务器 下载finalShell 项目bulid打包 压缩dist文件夹为zip格式 配置如下， 密码是公司zzy@xx(xx为host最后一个点和端口号之间的数字)eg：172.23.23.73就是73 然后执行linux命令 cd /home 执行其他命令 pc沙箱在sws上 命令行操作 阅读全文
posted @ 2023-06-09 11:53
风紧·扯呼
阅读(37)
评论(0)
推荐(0)
摘要：
问题 openPop 中v-bind获取不到 解决（通过getParams获取参数） 阅读全文
posted @ 2023-06-09 11:53
风紧·扯呼
阅读(6)
评论(0)
推荐(0)
摘要：
Bookmarks 快捷键 默认ctrl+alt+k冲突，可以在快捷键设置里调整为ctrl+k 阅读全文
posted @ 2023-06-09 11:52
风紧·扯呼
阅读(29)
评论(0)
推荐(0)
摘要：
Paste Image 说明 可以在vscode里的Markdown中直接粘贴剪切板的图片 设置 点击设置 点击扩展设置 输入想要保存图片的路径 复制快捷键 Ctrl+Alt+v 阅读全文
posted @ 2023-06-09 11:51
风紧·扯呼
阅读(50)
评论(0)
推荐(0)
摘要：
TODO Highlight 说明 todo高亮 设置 点击左下角设置 点击设置 点击右上角按钮 输入"todohighlight.keywords":["TODO:","todo:"],配置需要高亮的关键字 操作 在代码写上上面数组配置的字符串就Ok了 可配合Todo Tree树进行使用 阅读全文
posted @ 2023-06-09 11:50
风紧·扯呼
阅读(129)
评论(0)
推荐(0)
摘要：
Todo Tree 说明 可以快速定位到todo等地方 设置 点击左下角设置 点击设置 点击右上角按钮 输入 // 配置匹配的关键字 "todo-tree.general.tags": [ "BUG","HACK","FIXME","INFO","TODO","NOTE","TAG","XXX","todo","bug","fix","note","info"], // 配置关键字后在树形具体的显示 "todo-tree.highlights.customHighlight":{ "BUG": { "icon": "bug", "foreground": "#F56C6C", // 代码中的背景色 "background": "#e94d1e7a" "type": "line" }, "bug": { "icon": "bug", "foreground": "#F56C6C", "type": "line" }, "FIXME": { "icon": "flame", "foreground": "#FF9800", "type":"line" }, "fix": { "icon": 阅读全文
posted @ 2023-06-09 11:50
风紧·扯呼
阅读(99)
评论(0)
推荐(0)
摘要：
TurboConsoleLog 说明 快捷添加console.log 使用方法 ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log alt + shift + c 注释所有 console.log alt + shift + u 启用所有 console.log alt + shift + d 删除所有 console.log 阅读全文
posted @ 2023-06-09 11:49
风紧·扯呼
阅读(174)
评论(0)
推荐(0)
摘要：
快捷键 默认 操作 快捷键 备注 格式化代码 Shift + Alt + f 复制一行 Shift + Alt + 箭头 块区域注释 Shift + Alt + a 根据文件名搜索 Ctrl + P 搜索功能搜索 Ctrl + Shift + P 或F1 快速打开最近文件 Ctrl + R 阅读全文
posted @ 2023-06-09 11:48
风紧·扯呼
阅读(10)
评论(0)
推荐(0)
摘要：
数组相关API 改变原数组 不改变原数组 阅读全文
posted @ 2023-06-09 11:47
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
js高级程序设计（第四版） let 、var、const var: let 跟 var 的作用差不多，但有着非常重要的区别。最明显的区别是，let 声明的范围是块作用域，而 var 声明的范围是函数作用域。 function test() { var message = "hi"; // 局部变量 } test(); console.log(message); // 出错！ 阅读全文
posted @ 2023-06-09 11:47
风紧·扯呼
阅读(104)
评论(0)
推荐(0)
摘要：
一些未分类的问题 ==和true let a = true; a == true;// true a == 'true'; // false let b = 'true'; b == true;// false b == 'true'; // true 阅读全文
posted @ 2023-06-09 11:38
风紧·扯呼
阅读(9)
评论(0)
推荐(0)
摘要：
性能优化 脚本位置 因为脚本阻塞其他页面资源的下载过程，所以推荐的办法是：将所有<script>标签放在尽可能接近<body>标签底部的位置，尽量减少对整个页面下载的影响。例如： <html> <head> <title>Script Example</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>Hello world!</p> <-- Example of recommended script positioning --> <script type="text/javascript" src="file1.js"></script> <script type="text/javascript" src="file2.js"></script> <script type 阅读全文
posted @ 2023-06-09 11:37
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
字符串相关API 阅读全文
posted @ 2023-06-09 11:36
风紧·扯呼
阅读(10)
评论(0)
推荐(0)
摘要：
正则表达式 基本使用 let str = "shishdkahdjks器前端萨迪克进化萨发几个@dshmjfk" // 定义规则 let reg = /前端/ let reg1 = /前s端/ // 测试是否匹配 console.log(reg.test(str)); //true console.log(reg1.test(str)); // false console.log(reg.exec(str)); //数组，里面有找到的索引等 console.log(reg1.exec(str)); // null 阅读全文
posted @ 2023-06-09 11:34
风紧·扯呼
阅读(16)
评论(0)
推荐(0)
摘要：
飞书小程序 注意事项 大致目录结构 ├── pages │ │── home │ │ ├── home.ttml //页面结构（必须） │ │ ├── home.js //页面逻辑（必须） │ │ ├── home.json //页面结构 │ │ └── home.ttss //页面样式表 │ └── user │ ├── user.ttml │ └── user.js ├── app.js //小程序入口逻辑（必须） ├── app.json //小程序公共设置，例如：所有页面路径等（必须） ├── app.ttss //小程序公共样式（必须） └── project.config.json 阅读全文
posted @ 2023-06-09 11:34
风紧·扯呼
阅读(118)
评论(0)
推荐(0)
摘要：
git命令 git --help 名词解释 工作区：我们写代码的地方 暂存区：执行git add操作后文件所在区域 仓库： 执行git commit操作后文件所在区域 常用命令 git init // 初始化 在工作路径上创建主分支 git clone 地址 // 克隆远程仓库 git clone -b 分支名 地址 // 克隆分支的代码到本地 git config --list // 获取config信息 ,可简写 git config -l git config user.name 用户名 // 第一次提交需要配置用户名 git config user.email 邮箱 // 第一次提交需要配置邮箱 git status // 查看状态 git status -sb (sb是 short branch) // 简洁的输出git status中的信息 git add 文件名 文件名 // 对应文件添加到暂存区 git add . // 所有文件添加到暂存区 git commit -m "提交的备注信息" // 从暂存区提交到仓库 // 工作区或者暂存区的修改 提交到至仓库 //相当于 阅读全文
posted @ 2023-06-09 11:34
风紧·扯呼
阅读(37)
评论(0)
推荐(0)
摘要：
ios兼容问题 ios的html标签设置fontsize百分比，页面中使用rem 描述： 页面展示不符合预期（大的离谱） 解决方案 html{ /* 取消ios会缩放字体大小 */ -webkit-text-size-adjust: none; } 阅读全文
posted @ 2023-06-09 11:33
风紧·扯呼
阅读(14)
评论(0)
推荐(0)
摘要：
linux命令 ls 查看当前目录下的所有目录和文件 ls -a 查看当前目录下的所有目录和文件（包括隐藏的文件） ls -l 或 ll 列表查看当前目录下的所有目录和文件（列表查看，显示更多信息） ls /dir 查看指定目录下的所有目录和文件 如：ls /usr mkdir 文件夹名:在当前目录下创建文件夹 rm 文件夹名:删除文件夹 cp 文件a 文件b:复制文件a到文件b cp -r 文件夹a 文件夹b:复制文件夹a到文件夹b mv aaa bbb:修改aaa为bbb unzip xxx.zip:解压文件 阅读全文
posted @ 2023-06-09 11:32
风紧·扯呼
阅读(16)
评论(0)
推荐(0)
摘要：
Monaco Editor 使用过的api monaco.languages.getLanguages() 方法，获取 Monaco Editor 中支持的所有语言的信息 editor.setValue(val)：设置内容 editor.getValue()：获取内容 editor.updateOptions({ fontSize: 20 })：修改属性 添加自定义action并使用(通过按钮调用api，如格式化代码，搜索，右键等，通过editor._actions可以获取到所有默认action)// 添加 editor.addAction({ id: "myAction", label: "My Action Label", run: function (editor) { console.log("***自定义action的editor***", editor); }, }); // 使用方法1 editor.getAction("myAction").run().then(() => { alert("'myAction'运行成功"); }); // 使用方法二 edito 阅读全文
posted @ 2023-06-09 11:31
风紧·扯呼
阅读(1997)
评论(0)
推荐(0)
摘要：
vue inspect命令 // 导出 webpack 配置信息(导入到项目目录中)，webpack.config.js 可修改成自定义文件名 vue inspect > webpack.config.js // 输出 指定环境 的配置信息 mode：production、test、development vue inspect --mode <mode> // 查看所有已配置规则名称列表 vue inspect --rules 输出为： [ 'vue', 'images', 'svg', 'media', 'fonts', 'pug', 'css', 'postcss', 'scss', 'sass', 'less', 'stylus', 'js' ] // 查看指定规则 ruleName： 上述数组选项 vue inspect --rule <ruleName> // 查看所有已配置插件列表 vue inspect --plugins // 查看指定插件配置 vue inspect --plugin <pluginName> // 显示完整 阅读全文
posted @ 2023-06-09 11:31
风紧·扯呼
阅读(354)
评论(0)
推荐(0)
摘要：
Axios 访问本地文件 阅读全文
posted @ 2023-06-09 11:30
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
官网学习 模板语法 动态绑定多个值 v-bind="obj" <div v-bind="objectOfAttrs"></div> const objectOfAttrs = { id: 'container', class: 'wrapper' } 阅读全文
posted @ 2023-06-09 11:30
风紧·扯呼
阅读(17)
评论(0)
推荐(0)
摘要：
Vue3快速上手(代码实现) Vue3响应数据 vue3计算属性 setup参数 hook使用（混入） watch和watchEffect 生命周期 toRef和toRefs shallowReactive 与 shallowRef 阅读全文
posted @ 2023-06-09 11:29
风紧·扯呼
阅读(15)
评论(0)
推荐(0)
摘要：
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 阅读全文
posted @ 2023-06-09 11:28
风紧·扯呼
阅读(13)
评论(0)
推荐(0)
摘要：
基本使用 Webpack 是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件，就可以在浏览器段运行了。 我们将 Webpack 输出的文件叫做 bundle。 功能介绍 Webpack 本身功能是有限的: 开发模式：仅能编译 JS 中的 ES Module 语法 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码 阅读全文
posted @ 2023-06-09 11:28
风紧·扯呼
阅读(47)
评论(0)
推荐(0)
摘要：
自动清空上次打包资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: ["style-loader", "css-loader"], }, { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"], }, { test: /\.s[ac]ss$/, use: ["style-loader", "css-loader", "sass-loader"], }, { test: /\.styl$/, us 阅读全文
posted @ 2023-06-09 11:27
风紧·扯呼
阅读(17)
评论(0)
推荐(0)
摘要：
基本配置 在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。 5 大核心概念 entry（入口） 指示 Webpack 从哪个文件开始打包 output（输出） 指示 Webpack 打包完的文件输出到哪里去，如何命名等 loader（加载器） webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析 阅读全文
posted @ 2023-06-09 11:26
风紧·扯呼
阅读(14)
评论(0)
推荐(0)
摘要：
处理样式资源 本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用 官方文档找不到的话，可以从社区 Github 中搜索查询 Webpack 官方 Loader 文档 阅读全文
posted @ 2023-06-09 11:26
风紧·扯呼
阅读(23)
评论(0)
推荐(0)
摘要：
开发模式介绍 开发模式顾名思义就是我们开发代码时使用的模式。 这个模式下我们主要做两件事： 编译代码，使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源 代码质量检查，树立代码规范 提前检查代码的一些隐患，让代码运行时能更加健壮。 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。 阅读全文
posted @ 2023-06-09 11:26
风紧·扯呼
阅读(26)
评论(0)
推荐(0)
摘要：
处理字体图标资源 1. 下载字体图标文件 打开阿里巴巴矢量图标库 选择想要的图标添加到购物车，统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css 注意字体文件路径需要修改 src/main.js 阅读全文
posted @ 2023-06-09 11:25
风紧·扯呼
阅读(15)
评论(0)
推荐(0)
摘要：
处理 Html 资源 1. 下载包 npm i html-webpack-plugin -D 2. 配置 webpack.config.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: ["sty 阅读全文
posted @ 2023-06-09 11:24
风紧·扯呼
阅读(12)
评论(0)
推荐(0)
摘要：
处理图片资源 过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: ["style-loader", "css-loader"], }, { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"], }, { test: /\.s[ac]ss$/, use: 阅读全文
posted @ 2023-06-09 11:24
风紧·扯呼
阅读(22)
评论(0)
推荐(0)
摘要：
处理 js 资源 有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？ 原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。 其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。 针对 js 兼容性处理，我们使用 Babel 来完成 针对代码格式，我们使用 Eslint 来完成 我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理 阅读全文
posted @ 2023-06-09 11:23
风紧·扯呼
阅读(12)
评论(0)
推荐(0)
摘要：
html 压缩 默认生产模式已经开启了：html 压缩和 js 压缩 不需要额外进行配置 阅读全文
posted @ 2023-06-09 11:22
风紧·扯呼
阅读(7)
评论(0)
推荐(0)
摘要：
Css 处理 提取 Css 成单独文件 Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不好 我们应该是单独的 Css 文件，通过 link 标签加载性能才好 1. 下载包 npm i mini-css-extract-plugin -D 阅读全文
posted @ 2023-06-09 11:22
风紧·扯呼
阅读(10)
评论(0)
推荐(0)
摘要：
处理其他资源 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: ["style-loader", "css-loader"], }, { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"], }, { test: /\.s[ac]ss$/, use: ["style-loader", 阅读全文
posted @ 2023-06-09 11:21
风紧·扯呼
阅读(9)
评论(0)
推荐(0)
摘要：
修改输出资源的名称和路径 1. 配置 const path = require("path"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, // use 数组里面 Loader 执行顺序是从右到左 use: ["style-loader", "css-loader"], }, { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"], }, { test: /\.s[ac]ss$/, use: ["style-loader", "css-loader", "sass-loader"], }, { test: /\.styl$/, us 阅读全文
posted @ 2023-06-09 11:20
风紧·扯呼
阅读(28)
评论(0)
推荐(0)
摘要：
生产模式介绍 生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化，让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 生产模式准备 我们分别准备两个配置文件来放不同的配置 1. 文件目录 ├── webpack-test (项目根目录) ├── config (Webpack配置文件目录) │ ├── webpack.dev.js(开发模式配置文件) │ └── webpack.prod.js(生产模式配置文件) ├── node_modules (下载包存放目录) ├── src (项目源码目录，除了html其他都在src里面) │ └── 略 ├── public (项目html文件) │ └── index.html ├── .eslintrc.js(Eslint配置文件) ├── babel.config.js(Babel配置文件) └── package.json (包的依赖管理配置文件) 阅读全文
posted @ 2023-06-09 11:20
风紧·扯呼
阅读(36)
评论(0)
推荐(0)
摘要：
前言 为什么需要打包工具？ 开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。 这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。 所以我们需要打包工具帮我们做完这些事。 除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。 有哪些打包工具？ Grunt Gulp Parcel Webpack Rollup Vite ... 阅读全文
posted @ 2023-06-09 11:19
风紧·扯呼
阅读(13)
评论(0)
推荐(0)
摘要：
补充 entry 单个入口 module.exports = { // 可简写成 entry:'./path/to/my/entry/file.js' entry: { main: './path/to/my/entry/file.js', }, }; 阅读全文
posted @ 2023-06-09 11:11
风紧·扯呼
阅读(10)
评论(0)
推荐(0)
摘要：
开发服务器&自动化 每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化 1. 下载包 npm i webpack-dev-server -D 2. 配置 webpack.config.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/main.js", output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 clean: true, // 自动将上次打包目录资源清空 }, module: { rules: [ { // 用来匹配 .css 结尾的文件 test: /\.css$/, 阅读全文
posted @ 2023-06-09 11:10
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
webpack基础-总结 本章节我们学会了 Webpack 基本使用，掌握了以下功能： 两种开发模式 开发模式：代码能编译自动化运行 生产模式：代码编译优化输出 Webpack 基本功能 开发模式：可以编译 ES Module 语法 生产模式：可以编译 ES Module 语法，压缩 js 代码 Webpack 配置文件 阅读全文
posted @ 2023-06-09 11:09
风紧·扯呼
阅读(7)
评论(0)
推荐(0)
摘要：
学习资料 打开 哔哩哔哩 视频网站，搜索尚硅谷。 阅读全文
posted @ 2023-06-09 11:09
风紧·扯呼
阅读(4)
评论(0)
推荐(0)
摘要：
适合群体 Webpack 零基础，想从事项目脚手架研发的人。 具备 Webpack 开发经验，想要提升更多的人。 不是很了解 Webpack，但是想提升工资的人。 阅读全文
posted @ 2023-06-09 11:08
风紧·扯呼
阅读(11)
评论(0)
推荐(0)
摘要：
我能学到什么 青铜：我们会学习 Webpack 基础，包含是什么，有什么用，如何使用（这是最重要的）。 黄金：我们会学习 Webpack 高级优化配置，提升项目打包和运行时性能（这也是面试中最常问的点）。 钻石：我们会学习如何从零开始搭建一个项目脚手架，并进行优化（包含 React 和 Vue）。 王者：我们可以学习 Webpack 的原理，这也是迈向大神必备一条路。 阅读全文
posted @ 2023-06-09 11:07
风紧·扯呼
阅读(4)
评论(0)
推荐(0)
摘要：
前置知识 对 Nodejs 各个核心模块操作有一定认识。 比如：fs、path、os 等。 对 React 和 Vue 有一定认识，并且开发过项目。 这对于学习项目部分内容非常有帮助。 阅读全文
posted @ 2023-06-09 11:07
风紧·扯呼
阅读(22)
评论(0)
推荐(0)
摘要：
依赖环境 Nodejs 16+ 阅读全文
posted @ 2023-06-09 11:06
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
Loader 原理 loader 概念 帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 loader 执行顺序 分类 pre： 前置 loader normal： 普通 loader inline： 内联 loader post： 后置 loader 执行顺序 4 类 loader 的执行优级为：pre > normal > inline > post 。 相同优先级的 loader 执行顺序为：从右到左，从下到上。 阅读全文
posted @ 2023-06-09 11:05
风紧·扯呼
阅读(51)
评论(0)
推荐(0)
摘要：
Plugin 原理 Plugin 的作用 通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。 Plugin 工作原理 webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。 webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。 ——「深入浅出 Webpack」 阅读全文
posted @ 2023-06-09 11:05
风紧·扯呼
阅读(85)
评论(0)
推荐(0)
摘要：
主要学习介绍 本章节我们主要学习： loader 原理 自定义常用 loader plugin 原理 自定义常用 plugin 阅读全文
posted @ 2023-06-09 11:04
风紧·扯呼
阅读(19)
评论(0)
推荐(0)
摘要：
loader和plugin的总结 本章节我们学习了 webpack 中的 loader 和 plugin 用法。包括是什么，怎么使用，如何自定义等。 它能够帮助大家提升对 loader 和 plugin 的认识，同时学习到了原理，将来大家也能够在社区中做出贡献。 阅读全文
posted @ 2023-06-09 11:04
风紧·扯呼
阅读(21)
评论(0)
推荐(0)
摘要：
React 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const getStyleLoaders = (preProcessor) => { return [ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env", // 能解 阅读全文
posted @ 2023-06-09 11:03
风紧·扯呼
阅读(23)
评论(0)
推荐(0)
摘要：
搭建Cli介绍 我们将使用前面所学的知识来从零开始搭建 React-Cli 和 Vue-cli。 阅读全文
posted @ 2023-06-09 11:02
风紧·扯呼
阅读(17)
评论(0)
推荐(0)
摘要：
webpack构建脚手架总结 本章节我们学习到了： 如何搭建 React-Cli 和 Vue-Cli。 如何对脚手架进行优化。 未来随着项目越来越大，还可以在优化的方案。 阅读全文
posted @ 2023-06-09 11:02
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
Vue 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); const { DefinePlugin } = require("webpack"); const CopyPlugin = require("copy-webpack-plugin"); const getStyleLoaders = (preProcessor) => { return [ "vue-style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-pre 阅读全文
posted @ 2023-06-09 11:01
风紧·扯呼
阅读(9)
评论(0)
推荐(0)
摘要：
提升开发体验 SourceMap 为什么 开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子： /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are l 阅读全文
posted @ 2023-06-09 11:01
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
提升打包构建速度 HotModuleReplacement 为什么 开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。 所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。 是什么 HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。 怎么用 基本配置 阅读全文
posted @ 2023-06-09 11:00
风紧·扯呼
阅读(7)
评论(0)
推荐(0)
摘要：
优化代码运行性能 Code Split 为什么 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。 所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。 是什么 代码分割（Code Split）主要做了两件事： 分割文件：将打包生成的文件进行分割，生成多个 js 文件。 按需加载：需要哪个文件就加载哪个文件。 阅读全文
posted @ 2023-06-09 10:59
风紧·扯呼
阅读(16)
评论(0)
推荐(0)
摘要：
Webpack 高级配置介绍 本章节主要介绍 Webpack 高级配置。 所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 提升开发体验 提升打包构建速度 减少代码体积 优化代码运行性能 阅读全文
posted @ 2023-06-09 10:58
风紧·扯呼
阅读(9)
评论(0)
推荐(0)
摘要：
减少代码体积 Tree Shaking 为什么 开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。 如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。 这样将整个库都打包进来，体积就太大了。 是什么 Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。 注意：它依赖 ES Module。 阅读全文
posted @ 2023-06-09 10:31
风紧·扯呼
阅读(62)
评论(0)
推荐(0)
摘要：
默认内容 阅读全文
posted @ 2023-06-09 10:30
风紧·扯呼
阅读(3)
评论(0)
推荐(0)
摘要：
webpack代码优化总结 我们从 4 个角度对 webpack 和代码进行了优化： 提升开发体验 使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。 提升 webpack 提升打包构建速度 使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。 使用 OneOf 让资源文件一旦被某个 loader 处理了，就不会继续遍历了，打包速度更快。 使用 Include/Exclude 排除或只检测某些文件，处理的文件更少，速度更快。 使用 Cache 对 eslint 和 babel 处理的结果进行缓存，让第二次打包速度更快。 使用 Thead 多进程处理 eslint 和 babel 任务，速度更快。（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果） 阅读全文
posted @ 2023-06-09 10:30
风紧·扯呼
阅读(35)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:29
风紧·扯呼
阅读(7)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:29
风紧·扯呼
阅读(9)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:28
风紧·扯呼
阅读(7)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:27
风紧·扯呼
阅读(4)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:26
风紧·扯呼
阅读(12)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:26
风紧·扯呼
阅读(8)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:25
风紧·扯呼
阅读(4)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:25
风紧·扯呼
阅读(10)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:24
风紧·扯呼
阅读(18)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:23
风紧·扯呼
阅读(23)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:22
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:21
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:21
风紧·扯呼
阅读(5)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2023-06-09 10:20
风紧·扯呼
阅读(4)
评论(0)
推荐(0)
浙公网安备 33010602011771号