随着我们项目越来越复杂，我们在用webpack打包的时候，会发现打包的速度越来越慢，最后慢到打包一次要几分钟甚至更多的时间，缓慢的打包速度严重影响效率，那么如何提高打包速度就成为了我们的痛点，一般大家都是用HappyPack、Dellplugin和UglifyJsPlugin(…

Scope Hoisting-作用域提升,将模块都放到一个闭包函数中，通过减少闭包函数数量从而加快JS的执行速度。 最终打包可以将css文件直接以内链的形式插入网页中，进而可以减少网页请求。 这显然不是想要的结果，希望改变css文件内容，js文件的hash不会改变，只有相应的c…

之前有提过webpack根据不同的环境我们会加载不同的配置。我们只需要提取出三部分。 我们这里现在简单分层：正式项目最好创建一个config/webpack目录管理。 下面是源代码。 很明显上面watch模式效率不高而且很不方便, 编译完还需要刷新页面, webpack可以开启…

本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。 以上代码片段，摘自webpack配置的module.rule。 可以看出…

webpack 2.0 开始引入 tree shaking 技术。在介绍技术之前，先介绍几个相关概念： AST 对 JS 代码进行语法分析后得出的语法树 (Abstract Syntax Tree)。AST语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。 DCE…

技术：好的，这就改。 这种方案，很快就被自我否定了。 这种方案，也思索了很久，后来也被否定了。 经过前面两个问题后，我发现思考的方向完全是错误的，总是妄想改变webpack的打包方式，简直就是跟它的理念对着干。 可以看到这一次生成的hash是4897.... 但是输出的每个文件…

为什么使用 webpack，这应该是和前端的发展有关系的，我认为，webpack 是前端发展到一定阶段的必然产物（貌似是一句废话）。 因为计算机网络的飞速发展，导致 web 前端也在迅猛发展。最初的实践方案已经不能满足我们的需求，于是，越来越多的新技术新思想新框架孕育而生，比如…

前端的打包工具从之前的browserify、grunt、gulp到现如今的rollup、webpack，涌现出了很多优秀的打包工具，而目前最火的无疑是webpack，无论是当前热门的框架还是工具库很多都选择了它作为打包工具，因此在开发中webpack作为打包工具是一个很好的选择…

进入公司之后，接手的便是前人留下来的一个大项目。庆幸的是整个项目拥有完善的产品功能文档，但是由于项目过于庞大，老旧。包含了打包过慢，冗余文件过多等诸多问题。想要快速的解决这些问题，想要完全把功能重构一遍的话，成本太高了。一个一个文件来过，时间成本也比较大。因此在此篇文章中，我们…