Ewall

rem的原理什么的我就不说了，网上搜文章一搜一大把。 一般是使用手淘的lib-flexible.js，但是这个作为一种过渡方案已经被废弃了，目前已不推荐在你的新项目中使用这个方案来解决手机适配问题。 感兴趣可以看看我老早以前写的这篇-->手机适配问题之rem和lib-flexi…

虽然市场有很多牛逼的库比如loadsh、underscore.js等等，公司也有公共的函数库，但是如果你自己上手构建一个自己专属的函数库，用着会更爽，也更香。 一方面是为了学习，一方面是为了提高生产。 先去github上新建个仓库，在本地上下载打开它并输入命令初始化并安装下we…

到这里，基本上我们对于整个webpack是干什么的，可以做些什么事情，一些基本的配置应该是搞清楚了。 回顾一下前面章节的内容，大概有这么些东西。 如果要进一步的学习，我要求进步，我们可以看vue脚手架生成项目后的关于webpack的配置，或者react脚手架生成的项目配置。 第…

然后安装文档上面的教程，照猫画虎搞一下。这个loader两个环境都是需要的，我们应该是丢到webpack.common.js中： 首先既然要使用vue，就需要安装它。 然后我们npm run dev打包，浏览器中就会显示出hello world了。现在，是不是有点vue的那意思…

我们首先从字面意思上来理解一下，「tree shaking」翻译一下就是摇树罗，摇树的时候就会把不必要的枯枝烂叶给摇下来，同理，到代码中，「tree shaking」就是把没有用到的代码shaking掉。 如果你看要「tree-shaking」的一个具体的效果，那么你需要在「m…

HRM，生产环境不需要这个，只要开发环境需要，而且这个容易与代码分割产生冲突，如果你生产环境及设置了代码分割又设置了HRM就会失效。 等等。。。 为了解决这些不相容问题，所以我们需要多个不同环境下的webpack配置文件。 首先我们在chapter15目录下新建一个build的…

HMR(Hot Module Replacement)也就是热模块更新，是用来干什么的呢？就是你可以实时的更新某个状态而浏览器不重新刷新。 举个具体的例子可能就理解了啊，比如我们现在要把一个div块的颜色从白色改为黑色，最直接方便的办法是怎样？不是去编辑器里面改代码，然后等浏览…

前面chapter11章讲CodeSplitting的时候已经讲过代码分割的概念了，是个什么东西，但那是对js模块做代码分割，这节说下css的代码分割。 主要借助的就是一个插件：MiniCssExtractPlugin，还是沿用我们以前的代码，我们先来安装一下。 这是一个插件，…

preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。 Prefetching：设置这个指令，就…