随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。 这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。 还是只打包出了一个main.js，毫无变化…

1. tapable 同样的，在使用tap*注册监听时，传递的第一个参数，也只是一个标识，并不会在程序运行中产生任何影响。而第二个参数则是回调函数 3. Sync*类型的钩子 串行同步执行,第一个注册的回调函数会接收call传进来的所有参数,之后的每个回调函数只接收到一个参数,…

webpack前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack，妈妈再也不用担心我不会使用webpack，哪里不会看哪里。这是一个由浅入深的文章。 现在vue、react等脚手架都会自动将开发环境使用的webpac…

目前最火的打包工具莫过于 Webpack 了，关于 Webpack 的优化方案，网上有很多文章可以供大家参考。查阅前人的资料，总结自己在项目中遇到的问题，最终得出一些比较实用的优化方案，本文将与大家一一分享。既然是打包优化，那么我们需要时刻关注以下几点： 减少编译时间 减少编译…

webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。 执行webpa…

随着前端复杂度的不断提升，诞生出很多打包工具，比如最先的grunt，gulp。到后来的webpack和Parcel。但是目前很多脚手架工具，比如vue-cli已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现原理。其实了解这些工具的工作方式可以帮助我们更好…

在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了4以后，内置了一个一模一样的功能，而且起了一个好听的名字叫“优化” 好了，就写到这里吧，想必大家也看累了吧，辛苦大家了，哈哈。

本文的初衷是和你一起理清webpack的使用逻辑，以便能更加容易的编写及拓展自己项目所需的配置文件。不过也得提前说明本文可能并不是一篇好的可以跟着操作的教程（想跟着一步步做的童鞋可以看官方示例（https://webpack.js.org/guides/）和 webpack 入门，看这篇就够了（http://www.jianshu.com/p/42e11515c10f）。

对于Webpack有一句话Everything is a plugin，Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable。Tapable有点类似nodejs的events库，核心原理也是依赖与发布订阅模式。webp…