近几个月，接手了一个老项目的重构规划，有多老呢？就是前端青铜时代的项目，一个前后端都在同一个锅里的项目、完全没有使用任何的打包工具。 前端 html、css、js三剑客 加上 jQuery 复制粘贴就是干。 前端不够后端来凑。如果前端有一些需求不是很复杂的话，后端人员有时候也会…

笔者最近在准备给fle-cli升级到webpack4版本，觉得有必要将探索过程的经验分享给大家，遂决定写这篇文章。（不知道fle-cli？看这里） webpack本身及社区工具存在或多或少的问题，未经时间沉淀，维护成本高。 然而现在，笔者认为以上这些已经成熟，是时候来一波升级了…

前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。 但是对项目里的webp…

webpack 打包优化并没有什么固定的模式，一般我们常见的优化就是拆包、分块、压缩等，并不是对每一个项目都适用，针对于特定项目，需要不断调试不断优化。 对于 webpack4，建议从零开始配置，在项目初期，使用 webpack4 默认的配置。 接下来，本篇文章会列出所有适用于…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

一. 核心概念 2. output（输出） 3. loader（资源解析转换） 4. plugin （利用插件对webpack进行扩展和增强） 5. mode（针对开发环境和生成环境的区分处理） 二. 常用配置 6. devServer（热更新） 7. resolve(模块解析…

在开发 web 应用程序时候，性能都是必不可少的话题。而大部分的前端优化机制都已经被集成到前端打包工具 webpack 中去了，当然，事实上仍旧会有一些有趣的机制可以帮助 web 应用进行性能提升，在这里我们来聊一聊能够优化 web 应用程序的一些机制，同时也谈一谈这些机制背后…

三篇长文，带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 本文是第二篇，如果你还没有阅读《带你深度解锁Webpack系列(基础篇)》，建议阅读之后，再继续阅读本文。 本文会引入更多的 webpack 配置，如果文中有任…

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