TonyStudio

我们在开发的时候为了方便会引用很多第三方库来便捷的开发我们的应用，但是打包部署的时候发现dist文件特别大，那我们怎么知道是哪个库或哪个模块占用了多少的资源？我们可以用webpack-bundle-analyzer来辅助分析包的大小组成。

我们常用flex来设置左侧固定宽度，右侧弹性宽度的布局。只要设置左侧固定宽度的flex-basis就没多大问题。但是最近在探索的一个布局是右侧固定，左侧不固定，而且弹性区域内部又有markdown转换的html，发现设置flex-basis和flex-shrink都没用，弹性盒子是父盒子的宽度，右侧固定的区域被挤出父盒子了都。很头疼。最后将min-width: 0加在左侧的弹性盒子上就OK了，但这是为啥？

尝试在Ionic&Angular项目中创建一个密码输入框的组件。跟我们在移动端输入密码的行为类似，输入框的右侧有一个眼睛的图标，点击图标就可以显示或隐藏密码。

记录centos中安装nginx的过程。

在centOS服务器中使用yum安装mysql的过程踩坑。

项目中有依赖jquery和jquery插件的情况，使用webpack加载这些包，让程序正常运行。

我们经常用ssh登录服务器、进行git操作的账号验证。一般操作是生成密钥（id_rsa）、公钥（id_rsa），然后将公钥配置在服务器，本地保持私钥，然后用ssh即可登录。如果直接生成密钥的话，在~/.ssh/目录下只会有一对密钥。那么我们在连接多个服务器的时候就会很麻烦。OpenSSH可以允许我们去设置一个config文件，里面预定义每个服务器对应的密钥文件。来探索下如何去操作。

前面的三篇文章分别为：起步、支持es6、加载资源，我们现在可以完整的进行一个项目了。但我们从刚开始的目的就是探索这个过程，然后达到将项目中的requireJs加载更改为webpack加载。现在来看下如何来替换。

接上一篇 使用webpack构建AngularJs项目：支持ES6 我们已经将js的加载和转换处理好了，现在来看下资源的加载以及样式的处理。

用angular来实现拖拽布局，首先想到的是直接使用angular的cdk @angular/cdk/drag-drop，尝试了一下，是很好用，在两个列表之间或自身的拖动排序上是很好的。但是我想实现的是类似于左侧可拖动的组件列表，右侧是布局区域，当拖动的时候源列表是不变的，拖动到目标布局区域的时候是进行复制的功能。很尴尬的是使用cdk的拖动功能的时候总是会将源列表的项移出列表，哪怕是设定了是复制的功能，但是只有在拖放结束的时候才会回到源列表。查了很久，没找到可解决的方法。那先把cdk放一边，本来就对拖动这一块不熟，那我们就从拖动的基本事件入手，来实现这功能。