摘要：
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 阅读全文