1.webpack简单说明 1.1webpack是什么 webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序； 我们来对上面的解释进行拆解： p打包bundler：webpa

webpack本质上可以将其理解为是一种基于事件流的编程范例，一系列的插件运行。 1. webpack启动过程分析 1. 运行webpack 2. 查找webpack入口文件 在运行以上命令后，npm 会让命令行工具进入 node_modules.bin 目录查找是否存在 we…

Webpack中，有两大机制，一个是loader机制，一个是插件机制。虽然社区开源的Webpack loader众多，但是在研发过程中的一些特定场景需求下，我们仍然免不了要自己开发一些loader。本文中，我们就来看看如何实现自定义Webpack loader。 下面我们以实现…

经过前几篇文章我们介绍了 webpack 如何从配置文件的入口开始，将每一个文件转变为内部的 module，然后再由 module 整合成一个一个的 chunk。这篇文章我们来看一下最后一步 —— chunk 如何转变为最终的 js 文件。 上篇文章主要是梳理了在 seal 阶…

上一篇讲述了如何理解tapable这个钩子机制，因为这个是webpack程序的灵魂。虽然钩子机制很灵活，而然却变成了我们读懂webpack道路上的阻碍。每当webpack运行起来的时候，我的心态都是佛系心态，祈祷中间不要出问题，不然找问题都要找半天，还不如不打包。尤其是load…

webpack 的特点之一是处理一切模块，我们可以将逻辑拆分到不同的文件中，然后通过模块化方案进行导出和引入。现在 ES6 的 Module 则是大家最常用的模块化方案，所以你一定写过 import './xxx' 或者 import 'something-in-nodemod…

此系列文章作为笔记，用于记录分析 webpack 源码主流程的过程。 版本不同，源码略微有差异。 本项目 demo 开源在github，欢迎交流学习。 采用 vscode 来打断点调试分析。 webpack 从配置初始化到打包完成定义了一个生命周期，在这个生命周期中的每一个阶段…

相信开发过插件的同学，都看过 Writing a Plugin 或类似的文章，因为 mini-program-webpack-loader 这个工具开发时正好 webpack 4 发布了，所以就阅读了这篇文章，顺便看了以下几篇文档。 每个插件必须要有 apply 方法，用于 w…

Webpack封装了一套解析库enhanced-resolve专门用于解析路径，例如我们写了require('./index')，Webpack在打包时就会用它来解析出./index的完整路径。 可以看到官方定义他是一个可配置化的异步require.resolve。如果不了解r…