带你深度解锁Webpack系列(基础篇) 和 带你深度解锁Webpack系列(进阶篇)，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。 本文罗列出了十多种优化方式…

webpack入门，常用loader、plugin的使用及优化配置。 注册所有配置的插件，让插件监听webpack构建生命周期的事件节点，以做出对应的反应。

最近在前端论坛闲逛，看到了一些讲parcel、webpack的文章，就突然很好奇，每天都在用的打包工具，他们打包的原理究竟是什么。只有知道了这一点，才可以在众多的打包工具里，找到最适合的那个它。在了解打包原理之前，先花一些篇章说明了一下为什么要使用打包工具。 前端产品的交付是基…

1. 什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2. webpack核心概念 En…

当你通过npm下载一个package的时候，在这个package的根目录下都会有一个package.json文件，这个文件描述了该package的详细信息，比如名称，版本号，作者等。还有些属性是作为开发人员需要熟悉的，下面的属性都是在开发过程中一些常用的属性。 该属性描述了pa…

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

分割webpack配置文件的多种方法（一）将你的配置信息写到多个分散的文件中去，然后在执行webpack的时候利用--config参数指定要加载的配置文件，配置文件利用moduleimports导出。

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。并且跟具你的在项目中的各种需求，实现自动化处理，解放我们的生产力…

近期在团队项目里把Webpack升级到4.4.1，过程中发现现存的升级文档十分有限，踩了不少坑，好在升级之后提升还算显著，production场景下第三方依赖打包速度提升76%，development场景下本地服务首次启动提升效果约46%，再次启动提升效果上升至63%。这里将这…