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

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

本系列将会从原理、开发、优化、对比四个方面给大家介绍webpack的工作流程。【默认是以webpack v3为例子】 我们可以把webpack看做一个黑盒，只要会用就可以。先来体验一次很简单的webpack打包过程 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去…

今天我主要分享的是一些 webpack 中的易混淆知识点，也是面试的常见内容。我把这些分散在文档和教程里的内容总结起来，目前看是全网独一份，大家可以加个收藏，方便以后检索和学习

webpack是一个静态模块处理器，当它处理应用程序时，它会递归地构建一个关系依赖图，其中包含应用程序需要的每个模块，然后把所有这些模块打包成一个或多个包。 从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。 模块，在 Webpac…

其中将以前的webpack.config.dev.js和webpack.config.prod.js合并成webpack.config.js。 现在我们来对比下如何在新的"webpack": "4.19.1"中添加less-loader，并且通过插件babel-plugin-i…

... 简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。本文以 babel 6.x 为基准进行讨论。最近 babel 出了 7.x，放在最后聊。 严格来说，babe…

webpack 是一个打包工具。 loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。通过 loader 可以把其他格式的文件转为 webpack 可以打包的模块。 配置文件：通过 module.rules 字段配置。 …

webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模…