webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。 Output: 如何命名输出文件，以及输出…

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。 过度分析源码对于大家并没有太大的帮助。本文主要是想通过分析webpack的构建流程以及实现一个简单的webpack来让大家对we…

作为一个web项目build之后12M还是比较笨重的，作为一个有追求的前端攻城狮是很难接受的。于是开启了我的优化之路 这一套打下去，基本把我这个项目的大肥肉从build包里面拿出去了。 这个操作build包瘦身超级大绝杀,压缩后通常能帮我们减少响应 70% 左右的大小。但是不建…

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。…

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

想必大多数人在开发 vue 等 SPA 项目都时候都会直接用 vue-cli 等脚手架开发，一是方便省去了好多配置上的功夫，二是 vue-cli 毕竟是久经考验较为成熟的东西，遇到问题也能在网上找到相应解决方案。 但是，如果我们要更好地理解脚手架的配置及其构建打包的机制，我们就…

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

webpack5即将发布，打算趁发布前踩个坑，之前从alpha版本就有关注，本次重点更新在长期缓存，tree shakking和es6打包这块，具体更新日志可以参考官方。 node版本更新为v10。 webpack5默认采用es6代码进行输出，4是es5的(可通过设置outpu…

devServer.proxy完成代理配置即可。 下面将采用Docker+Nginx的方法完成前端项目的发布，并使用Nginx反向代理完成跨域支持。 设置 .dockerignore 文件能防止 node_modules 和其他中间构建产物被复制到镜像中导致构建问题。