43 天前 / Ryan众乐
1 背景相信对于每个刚接触构建的同学来说， webpack 都是难以跨越的一道坎，它凭着抽象的概念、“言简意赅” 的文档，难倒了一众英雄好汉。 由于自己平时从零手写 webpack 配置的机会比较少，所以对 webpack 里的一些配置不都是特别清楚。 最近的一个需求需要给页面资源增加 md5 版本号，我正好借着这个机会，把项目里的 webpack 配置都重新梳理了一遍。 本文对于基本的配置概念（如 entry 、 output 等）就不一一赘述了，着重介绍的是splitChunks和manifest两部分内容。
71 天前 / Ryan众乐
首发于一道题做一宿写文章 Webpack 的 ModuleFederation 原理分析及发散啦啦啦啦怡途数字科技集团有限公司 前端工程师 2 人赞同了该文章前言前几天我们稍微尝试了一下 Webpack 提供的新能力 Module Federation，它为我们代码共享跟团队协作提供了新的可能性。之前若是我们项目 A 跟项目 B 有一些共同的逻辑，那我们可能会选择把它抽成一个 npm 包，然后在两个项目间引入。但是这有个缺点是只要 npm 包更新，我们的项目就需要重新打包来引入公共逻辑的更新，哪怕项目里一行代码没改。
180 天前 / 江米小枣tonylua
在之前的一篇文章中，介绍过组件化搭建工具 storybook 在 vue 项目中的安装和配置。相比于其成文的时间，vue 项目依赖的工具多有发展；并且在实际应用中，多种历史版本的项目并存的状况比比皆是，用官方提供的 npx sb init 往往会出现配置失败的情况，而较新或过旧的资料都在网上难觅 -- 所以在此特别补充一篇，记录 新、旧 两种典型配置下，storybook 可用的手动配置方法： 1. babel7 + webpack5 1.1 安装过程 diff--gita/.babelrcb/.babelrc indexe1f4817..71b5fe8100644 ---a/.babelrc +++b/.babelrc @@-6,7+6,8@@ "modules":false, "targets":"last2ye...
225 天前 / vivo互联网技术
Webpack 基于 tapable 构建了其复杂庞大的流程管理系统，基于 tapable 的架构不仅解耦了流程节点和流程的具体实现，还保证了 Webpack 强大的扩展能力；学习掌握 tapable，有助于我们深入理解 Webpack。 一、tapable 是什么？ The tapable package expose many Hook classes,which can be used to create hooks for plugins. tapable 提供了一些用于创建插件的钩子类。 个人觉得 tapable 是一个基于事件的流程管理工具。 二、tapable 架构原理和执行过程 tapable 于 2020.9.18 发布了 v2.0 版本。此文章内容也是基于 v2.0 版本。
237 天前 / 冷星1024
本文作者：Wind、Skyler、ZRJ、ZJ 前言 Webpack5 在 2020 年 10 月 10 日正式发布，并且在过去的几个月中快速演进和迭代，截止 1 月 28 日，Webpack5 已经更新了 18 个 minor 版本，带来了许多十分吸引人的新特性。据官网介绍 [1]，Webpack5 整体的方向性变化有以下几点： 通过持久化硬盘缓存能力来提升构建性能通过更好的算法来改进长期缓存（降低产物资源的缓存失效率）通过更好的 Tree Shaking 能力和代码的生成逻辑来优化产物的大小改善 web 平台的兼容性能力清除了内部结构中...
250 天前 / 西岭老湿
首发于西岭老湿写文章 Webpack 5 新特性尝鲜西岭老湿一个普通文艺码农安装与启动 Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变； 今天我们就来做个对比看看，webpack5 带来了那些全新的改变； 没有对比就没有伤害，为了更好地伤害 webpack 4 , 我们使用 webpack4 和 webpack 5 分别构建一个 React 项目来做对比： mkdir webpack4mkdir webpack5# 分别执行 初始化命令 npm init -y 创建文件 /src/index.js， /src/App.js...
346 天前 / 杨琼璞
Webpack 从 v4 迁移至 v5 问题记录最近，出于工作中对项目优化，有打算将用到的 Webpack 从 4.* 升级至最新版本（Webpack@5.3.0）；鉴于之前就有 Webpack 相关经验，略看了点文档 Webpack 从 v4 升级到 v5 后，就基于 nicelinks-vue-client 项目开始了升级之旅。因为强行升级，过程也较为曲折，有将遇到的一些问题做下梳理记录，希望对之后欲升级 webpack 的朋友，形成参考。 webpack5 构建 vue 编译报错 TypeError: Cannot read property 'properties' of undefined 重新安装依赖 webpack-cli； yarn remove webpack-cliyarn add webpack-cli -D[webpack-...
384 天前 / 九彩拼盘
前言 前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具，而且还发推表示再也回不去 webpack 了， 还引来了 webpack 核心开发人员肖恩的搞笑回复， 那就让我们一起来看一下 vite 到底有啥魔力？ 什么是 Vite？github：https://github.com/vitejs/vite Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 它主要具有以下特点： 快速的冷启动即时的模块热更新真正的按需编译那废话少说，我们先直接来试用一下。
418 天前 / 张欢
Dennis Gaebel 是一名设计技术专家和作家，他热爱开源、CSS 架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5 的新特性阅读 1689 于 2019 年 2 月 6 日 6 分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是 Webpack。在本文中，我将分享 Webpack 5 的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。
438 天前 / 冷星1024
背景—Webpack 迭代到 4.x 版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 开发者视角—假设某一天，我们接到了需求，需要开发一个 react 单页面应用，页面中包含一行文字和一个按钮，需要支持每次点击按钮的时候让文字发生变化。于是我们新建了一个项目，并且在 『根目录』/src 下新建 JS 文件。
443 天前 / 杨琼璞
背景在开发快应用时，少不了构建操作：npm run build（官方 IDE 集成了这些操作，本质上也是调用一样的方法）。这是因为快应用有自己的 DSL 语法，直接这样写出来，在底层是不认识的，需要把业务代码编译成底层识别的样子（感兴趣的同学，可在 build 文件夹查看编译后的代码产物）。整个过程就跟 Vue 和 React 工程的打包一样。等待的过程总是漫长，当项目越来越大的时候，难免还要花上那么点时间。大家都希望这个过程越快越好。 快应用工程是基于 hap-toolkit 编译打包的。而它的功能，部分是基于 Webpack 开发。
446 天前 / 冷星1024
手写 webpack 核心原理 一、核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二、基本准备工作 三、获取模块内容 四、分析模块 五、收集依赖 六、ES6 转成 ES5（AST） 七、递归获取所有依赖 八、处理两个关键字 一、核心打包原理 1.1 打包的主要流程如下需要读到入口文件里面的内容。分析入口文件，递归的去读取模块所依赖的文件内容，生成 AST 语法树。根据 AST 语法树，生成浏览器能够运行的代码 1.2 具体细节获取主模块内容分析模块安装 @babel/parser 包（转 AST）对模块内容进行处理安装 @babel/traverse 包（遍历 AST 收集依赖）安装 @babel/core...
450 天前 / 冷星1024
引言 webpack 的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及 webpack 新版本中的一些新特性来显著提升 webpack 的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 本文演示代码，仓库地址：https://github.com/Jack-cool/webpack4( 欢迎 star 啊) 速度分析 webpack 有时候打包很慢，而我们在项目中可能用了很多的 plugin 和 loader，想知道到底是哪个环节慢，下面这个插件可以计算 plugin 和 loader 的耗时。
460 天前 / pingan8787
学习时间：2020.06.14 学习章节：《Webpack HMR 原理解析》 一、HMR 介绍 Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，它允许在 JavaScript 运行时更新各种模块，而无需完全刷新。 Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh.--《Hot Module Replacement》 当我们修改代码并保存后，Webpack 将对代码重新打包...