webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。 Grunt 是一套前端自动化工具，帮助处理反复重复的任务。一般用于：编译，压缩，合并文件，简单语法检查等 Webpack 是模块化管理工具和打包工具。通过 loader 的转换…

ES6前，js没有属于自己的模块规范，所以社区制定了 CommonJS规范。而NodeJS所使用的模块系统就是基于CommonJS规范实现的。 根据当前运行环境的判断，如果是 Node 环境 就是使用 CommonJS 规范， 如果不是就判断是否为 AMD 环境， 最后导出全局…

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

关于 微信公众号：前端呼啦圈（Love-FED） 我的博客：劳卜的博客 知乎专栏：前端呼啦圈 前言 先前写了一篇 webpack 入门的文章《webpack 入门必知必会》，简单介绍了 webpack 拆分、打包、压缩的使用方法。本文将在上篇文章的基础上进一步讲解在使用 webpack 构建…

webpack的核心功能是通过抽离出很多插件来实现的，因此系统内功能的划分粒度很细，这样做到了完美解偶同时又分工明确，代码容易维护。可以说插件就是webpack的基石，这些基石又影响着流程的走向。这些钩子是通过Tapable串起来的，可以类比Vue框架的生命周期，webpack…

很多人在构建前端项目时会发现打包出来的chunk.vendors.xxx.js文件实在是太大,导致首屏加载速度很慢.这里我把阿童木聊天室的首屏优化步骤分享给大家. 1. 使用webpack-bundle-analyzer分析前端项目包大小, 找出问题源头. 2. 去掉vuecl…

对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 modu…

所有的内容之后会陆续放出，如果你有任何想要了解的内容或者有任何疑问，关注公众号【前端瓶子君】回复【123】添加好友，我会解答你的疑问。 作为一个前端开发人员，我们花费大量的时间去处理 webpack、gulp 等打包工具，将高级 JavaScript 项目打包成更复杂、更难以解…

webpack的熟练使用已成为当代前端工程师必备的生存技能。毋庸置疑，webpack已成为前端构建工具的佼佼者，网络上关于如何使用webpack的技术文档层出不穷。但鲜有能将webpack的构建流程讲清楚的。本文尝试从解读源码以及断点调试的方式，来探究 webpack 是如何一…