蟹堡王合伙人

当谈起Webpack Plugin时，我希望你能清楚的这些必不可少的知识点。通过 Webpack Plugin 你可以利用它来做什么，或者说它究竟可以为你带来什么,也许我们可以在文章中一探究竟。

「万字解析」300行代码梳理webpack核心工作流源码，从工程化出发，真正搞懂webpack背后打包机制。带你走进webpack生态开发的世界，真正对应用webpack了然于胸。

前面几个章节我们分别去探索了webpack的loader机制、plugin机制、devServer、sourceMap、hot Module Replace，但是你是否知道这些配置项是怎么去跟webp

「万字解析」架构视角图文并茂讲述Webpack Loader原理，从基础配置过渡源码实现，最终手把手带你复刻企业级loader。从原理搞懂Webapck中loader是如何处理你的文件。

大家好我是来蹭饭，一个会点儿吉他和编曲，绞尽脑汁想傍个富婆的摸鱼大师。这是咱们Webpack大白话系列的第二篇文章，用大白话跟你唠明白如何优化Webpack。万字加多图，客官里边请。

1. webpack打包基本原理 1. 处理单个模块（以入口为例） 我们可以看到，入口文件index.js的所有内容都以字符串形式输出了，我们接下来可以用正则表达式或者其它一些方法，从中提取到import以及export的内容以及相应的路径文件名，来对入口文件内容进行分析，获取…

上面已经创建好了要打包的文件，并且都互相导出、引入。接下来创建lib文件夹，用来存放自己实现的bundler.js相关文件，用来实现打包功能。 bundler.js会导出一个bundler类。 并且会接收webpack配置传进来的options参数。 最后执行run()函数执行…

对于使用 Webpack 打包的项目而言，Loader 是不可或缺的东西。本质上，一个 Loader 就是一个导出为函数的 JavaScript 模块。

本文通过精美的图文，深入分析 Webpack Loader 的运行机制，带你吃透 Webpack loader 的 11 个核心问题。