本文适合2~4年的前端开发人员的进阶，且对vue或者react搭配webpack有一定的经验。如果webpack的基本使用都未了解，建议实践后再看本文。 本文是原创，均为本人手写。部分思维, 借鉴了“宫小白”的webpack文章。文章结尾标注了“感谢”。 此前有人关心博客源码的…

在上两章节中我们已经介绍过了 JavaScript 打包机制 以及 webpack 所有的内置配置，但当项目业务功能达到一定规模时，默认的配置已经不足以满足开发、用户的期望，我们就需要对 webpack 配置进行优化。 如何知道具体该如何优化喃，最直观的方式是分析它的输出文件，…

公司的前端项目使用Vue框架，Vue框架使用Webpack进行构建，随着项目不断迭代，项目逐渐变得庞大，然而项目的构建速度随之变得缓慢，于是对Webpack构建进行优化变得刻不容缓。经过不断的摸索和实践，通过以下方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分…

前段时间，在公司做了个 Webpack 的分享。听众40多人，感觉还不错。所以总结一下，先看一下ppt的目录： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建…

在使用Vue开发单页面的时候，我们大多数时候都是使用的官方CLI工具，现在的Vue CLI已经迭代到了4.X了，可以说很成熟稳定了，能满足大多数要求，而且上手简单。本着折腾摸索的精神，还是打算自己搭建一个开发环境，熟悉各个流程。 这样一个项目就先初始化完毕，接下来开始进入各种工…

当然，相信了解过前端模块化发展历史的童鞋，都应该听过IIFE、AMD、CommonJS等等，它们都是能够实现模块化的规范，直到ES2015出来后，才正式把模块化纳入其标准中。在谈到今天主题前，我们先简单讲解一下上面几种模块化方式的实现以及区别，对于后面将要讲到的webpack模…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

webpack5即将发布，打算趁发布前踩个坑，之前从alpha版本就有关注，本次重点更新在长期缓存，tree shakking和es6打包这块，具体更新日志可以参考官方。 node版本更新为v10。 webpack5默认采用es6代码进行输出，4是es5的(可通过设置outpu…

没有什么比时间更具有说服力了，因为时间无需通知我们就可以改变一切。 Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使…