整理js中的各种width/height
window相关的宽高
window.innerWidth 内部宽度
window.innerHeight 内部高度
window.outerWidth 外部宽度
window.outerHeight 外部高度
window.screen.width
window.screen.height
win
...
webpack4笔记(7)-原理探究
深入浅出webpack第五章，原文链接：http://webpack.wuhaolin.cn/5%E5%8E%9F%E7%90%86/
工作原理概括基本概念
entry：入口，webpack执行构建的第一步将从entry开始，可抽象成输入。
module：模块，在webpack里一切皆模块，一个
...
webpack4笔记(4)-处理css
CSS基础处理webpack中关于css的处理用到两个loader：
css-loader: 用于处理css文件中的@import和url(…)
style-loader: 将css-loader的输出生成js中的函数调用将css动态添加到html文件中。
1yarn add css-loade
...
webpack4笔记(3)-代码分割
为什么要代码分割？
减少代码重复，比如在多页面的应用中，如果多个页面都同时引用了某些module的情况；
支持缓存，比如第三方库通常是不会怎么变的，将他们单独抽离出来有利于浏览器缓存。
什么情况下代码分割？
入口文件，每个入口文件将有单独的一次代码分割
使用SplitChunksPlugin插件;
...
webpack4笔记(5)-环境分离
开发和生产环境构建配置差异日常的前端开发工作中，一般都会有两套构建环境：一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印 debug 信息，包含 sourcemap 文件；另外一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印 debug 信息，静态文件不包括 sour
...
webpack4笔记(2)-进阶知识
一、webpack解析代码模块路径在 webpack 支持的前端代码模块化中，我们可以使用类似 import * as m from ‘./index.js’ 来引用代码模块 index.js。
引用第三方类库则是像这样：import React from ‘react’。webpack 构建的时候
...
webpack4笔记(6)-性能优化
webpack的性能瓶颈
webpack 的构建过程时间长
webpack 打包的结果体积大
常见优化方案构建过程提速策略1.减轻 loader 工作
比如 babel-loader 最常见的优化方式是，用 include 或 exclude 来帮我们避免不必要的转译，比如 webpack 官方在
...
canvas高清屏中绘制模糊问题
用canvas绘制价格趋势图的时候发现在mac上看线条和文字都非常模糊
为什么？因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占
...