随着2018年2月15号webpack4.0.0出来已经有一段时间了，webpack依靠着“零配置”，“最高可提升98%的速度”成功吸粉无数，对于饱受项目打包时间过长的我，无疑是看到了曙光，于是决定开始试水。 随着项目的不断迭代，样式文件和js文件的数量越来越多，造成webpa…

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对…

个人练习项目总结... 写这个栏目的目的主要是方便以后自己回头回顾和深入学习一下每一块东西... ​ 在项目过程中由于要用到读取本地的json文件,但是由于webpack打包之后路径会更改的原因会导致路径的书写变得异常困难,于是便想到和vue-cli一样创建一个不会被处理的st…

比如有一个txt文件，我们想通过raw-loader来获取整个txt文件里面的字符串内容。除了使用统一webpack config配置的方式之外，我们还可以在引入的时候，用这样的语法来引入： 其实使用webpack.config文件统一配置loader后，最终也是会转成这种方式…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

热更新HMR： 热重载live reload并不能够保存应用的状态（states），当刷新页面后，应用之前状态丢失。举个列子：页面中点击按钮出现弹窗，当浏览器刷新后，弹窗也随即消失，要恢复到之前状态，还需再次点击按钮。而webapck热更新HMR则不会刷新浏览器，而是运行时对模…

2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

将我的研究成果，画一个简要的流程图，如果您有兴趣看完，回头再看看这个流程图。 图片里的方块中文字的序号，就是运行的顺序。 通过我们以往对tapable的了解，知道可以通过钩子来监听Tapable类相应的事件，我们做相应的处理就行了。 写插件关键的问题不是注册钩子，而是compi…