随笔分类 - 前端技术栈
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：/* let arr = [ { id: 1, name: '部门1', pid: 0 }, { id: 2, name: '部门2', pid: 1 }, { id: 3, name: '部门3', pid: 1 }, { id: 4, name: '部门4', pid: 3 }, { id: 5
阅读全文
摘要：
阅读全文
摘要：const obj = { a: { b: 1, c: 2, d: { e: 5 }, }, b: [1, 3, { a: 2, b: 3 }], c: 3 } /* { 'a.b': 1, 'a.c': 2, 'a.d.e': 5, 'b[0]': 1, 'b[1]': 3, 'b[2].a':
阅读全文
摘要：<div class="ul-2"> <div class="item">1</div> <div class="item">2</div> <div class="item">2</div> <div class="item">2</div> <div class="item">2</div> <
阅读全文
摘要：js逗号运算符 按照从左到右的顺序运算，返回右边的值 babel编译的时候常看见这种case (0,a.fn)(arg) 其实就是让fn中的this指向window var temp; temp = a.fn() // this window temp() reduce 当数组长度为1，调用redu
阅读全文
摘要：display: inline-block; max-width: 206px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; // 2行省略 overflow: hid
阅读全文
摘要：前端页面基础资源 有些页面使用的基础库是一样的，并且也有公共的模块 对于这些资源如果打包的时候每个都打一份，会导致打包的体积比较大 webpack提取页面公共资源，比如公共包，公共模块？ webpack 提取页面公共资源 基础库分离 思路: 将react、react-dom通过cdn引入,不打入bu
阅读全文
摘要：多页面应用 MPA 多页面相对于单页面而言，多页面拥有多个入口，一个页面就是一个业务 单页面所有的业务都在一个url中，只不过后面的hash会发生变化 多页面应用的优势 每个页面之间相互解耦 对于seo更加友好 多页面打包思路 一般方案 每个页面对应一个entry以及html-webpack-plu
阅读全文
摘要：关于资源内联 代码层面: 页面框架的初始化脚本 如flexible 上报相关打点 css、js的初始化以及加载完成的上报点的代码需要内联到html里面去 css内联避免页面闪动 首屏一般会内联css,避免页面闪动(代码层面的体验，初始化的内容) 请求层面 减少http请求 小图片或者字体内联(url
阅读全文
摘要：前端页面适配 不同设备分辨率不一样，因此需要页面适配 前端如何做页面适配？ css媒体查询实现响应式布局 这种方式的缺陷就是需要编写多套适配样式代码 css3 rem单位 W3C对rem的定义: font-sise of the root Element. 即根元素的fontsize大小 rem:
阅读全文
摘要：autoPrefix自动补齐CSS3前缀 关于CSS3属性前缀 浏览器很多种，浏览器标准没有完全统一。我们需要面对一些兼容性的问题 Trident (-md) IE系列 Geko (-moz) Webkit (-webkit) Presto (-o) 有些兼容问题是可以在构建阶段避免的，比如CSS3
阅读全文
摘要：如何在每次构建之前自动清理构建目录 npm scipt结合rm rf清理 clean-webpack-plugin rm rf ./dist 这个方法其实并不优雅，可以用clean-webpack-plugin package.json { "script":"rm rf ./dist && web
阅读全文
摘要：webpack代码压缩 js压缩 css压缩 html压缩 js压缩 webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件 所以我们默认打包的js文件以及是压缩过的 当然我们也可以手动安装一下这个插件并且手动设置一个参数 去做一些并行压缩之类的事情 css
阅读全文
摘要：文件指纹 是什么？ 文件指纹就是打包输出后文件名的后缀 有什么用？ 文件指纹通常可以用来做一些版本管理，在发布的时候，有修改的文件就发布上去，没有修改的文件还可以继续用浏览器本地缓存，这样可以加速页面访问 文件指纹类型以及如何生成 文件指纹有三种类型 Hash Chunkhash Contentha
阅读全文
摘要：Webpack中的文件监听 文件监听是在发现源码变化时，就自动构建生成新的输出文件 开启文件监听有两种方式 在启动webpack命令时，加上--watch参数 在webpack.config.js中，设置watch:true 1 watch参数 方式 配置script脚本 运行npm run wat
阅读全文
摘要：Webpack解析图片 使用file-loader解析图片资源 在组件中引入并使用 Asset是图片的哈希 Asset Size Chunks Chunk Names 982163fc946587581278ea658d60e8e2.jpg 35.8 KiB [emitted] reactComp.
阅读全文
摘要：Webpack 解析css css-loader: 加载css对象，并转换成commonjs对象 style-loader: 将样式写入style标签并插入到header中 安装loader npm i style-loader@0.23.1 css-loader@2.1.1 -D 配置webpac
阅读全文
摘要：webpack解析ES6 webpack原生可以识别js，但不能识别ES6语法 因此需要借助babel-loader以及.babelrc配置文件 babel-preset是一系列babel plugin的集合 安装以下npm包 npm i @babel/core@7.4.4 @babel/prese
阅读全文
摘要：Mode Mode 用于指定当前的构建环境是 production、development 还是 none 设置 mode 可以使用 webpack 内置的函数 mode 的默认值为 production 设置了 mode 之后会对应执行开发/生成环境具有的一些插件与功能，如果设置成 none,那么
阅读全文
浙公网安备 33010602011771号