99 天前 / 江米小枣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...
144 天前 / 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 版本。
156 天前 / 冷星1024
本文作者：Wind、Skyler、ZRJ、ZJ 前言 Webpack5 在 2020 年 10 月 10 日正式发布，并且在过去的几个月中快速演进和迭代，截止 1 月 28 日，Webpack5 已经更新了 18 个 minor 版本，带来了许多十分吸引人的新特性。据官网介绍 [1]，Webpack5 整体的方向性变化有以下几点： 通过持久化硬盘缓存能力来提升构建性能通过更好的算法来改进长期缓存（降低产物资源的缓存失效率）通过更好的 Tree Shaking 能力和代码的生成逻辑来优化产物的大小改善 web 平台的兼容性能力清除了内部结构中...
169 天前 / 西岭老湿
首发于西岭老湿写文章 Webpack 5 新特性尝鲜西岭老湿一个普通文艺码农安装与启动 Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变； 今天我们就来做个对比看看，webpack5 带来了那些全新的改变； 没有对比就没有伤害，为了更好地伤害 webpack 4 , 我们使用 webpack4 和 webpack 5 分别构建一个 React 项目来做对比： mkdir webpack4mkdir webpack5# 分别执行 初始化命令 npm init -y 创建文件 /src/index.js， /src/App.js...
265 天前 / 杨琼璞
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-...
303 天前 / 九彩拼盘
前言 前两天尤大在 vue 3.0 beta 直播中提到了一个 vite 的工具，而且还发推表示再也回不去 webpack 了， 还引来了 webpack 核心开发人员肖恩的搞笑回复， 那就让我们一起来看一下 vite 到底有啥魔力？ 什么是 Vite？github：https://github.com/vitejs/vite Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。 它主要具有以下特点： 快速的冷启动即时的模块热更新真正的按需编译那废话少说，我们先直接来试用一下。
337 天前 / 张欢
Dennis Gaebel 是一名设计技术专家和作家，他热爱开源、CSS 架构、SVG、排版、提案、交互和基于模式的设计。 Webpack 5 的新特性阅读 1689 于 2019 年 2 月 6 日 6 分 如果您正在打包前端代码，很可能使用一个工具来实现。 这个工具极有可能是 Webpack。在本文中，我将分享 Webpack 5 的一些新功能， 以及在日常工作中继续使用它时应该注意的事项。 这个新版本包含了大量的新特性，虽然我不会详细介绍每个新特性，但是我将与您分享核心团队列出的一些重要特性。
357 天前 / 冷星1024
背景—Webpack 迭代到 4.x 版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 开发者视角—假设某一天，我们接到了需求，需要开发一个 react 单页面应用，页面中包含一行文字和一个按钮，需要支持每次点击按钮的时候让文字发生变化。于是我们新建了一个项目，并且在 『根目录』/src 下新建 JS 文件。
362 天前 / 杨琼璞
背景在开发快应用时，少不了构建操作：npm run build（官方 IDE 集成了这些操作，本质上也是调用一样的方法）。这是因为快应用有自己的 DSL 语法，直接这样写出来，在底层是不认识的，需要把业务代码编译成底层识别的样子（感兴趣的同学，可在 build 文件夹查看编译后的代码产物）。整个过程就跟 Vue 和 React 工程的打包一样。等待的过程总是漫长，当项目越来越大的时候，难免还要花上那么点时间。大家都希望这个过程越快越好。 快应用工程是基于 hap-toolkit 编译打包的。而它的功能，部分是基于 Webpack 开发。
365 天前 / 冷星1024
手写 webpack 核心原理 一、核心打包原理 1.1 打包的主要流程如下 1.2 具体细节 二、基本准备工作 三、获取模块内容 四、分析模块 五、收集依赖 六、ES6 转成 ES5（AST） 七、递归获取所有依赖 八、处理两个关键字 一、核心打包原理 1.1 打包的主要流程如下需要读到入口文件里面的内容。分析入口文件，递归的去读取模块所依赖的文件内容，生成 AST 语法树。根据 AST 语法树，生成浏览器能够运行的代码 1.2 具体细节获取主模块内容分析模块安装 @babel/parser 包（转 AST）对模块内容进行处理安装 @babel/traverse 包（遍历 AST 收集依赖）安装 @babel/core...
369 天前 / 冷星1024
引言 webpack 的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及 webpack 新版本中的一些新特性来显著提升 webpack 的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 本文演示代码，仓库地址：https://github.com/Jack-cool/webpack4( 欢迎 star 啊) 速度分析 webpack 有时候打包很慢，而我们在项目中可能用了很多的 plugin 和 loader，想知道到底是哪个环节慢，下面这个插件可以计算 plugin 和 loader 的耗时。
379 天前 / 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 将对代码重新打包...
389 天前 / Ryan众乐
首发于暴走的 Jser 写文章 webpack 与 rollup 背后的 acornGloriaFE Engineer63 人赞同了该文章现如今 webpack 与 rollup 在整个前端工程化体系中扮演着极其重要的角色，许许多多的工程化解决方案都需要依托这两款模块打包器去实现。 社区中有大量的文章探索了这些打包器的内部原理，尤其是 webpack，却很少有文章探究 webpack 是如何将代码转换成 ast（抽象语法树）的，最多也只是提及 acorn，至于 acorn 的内部实现，很少有人去探究。 如果点开 acorn 的贡献者列表，你会发现一些著名开源项目成员的身影，如：eslint、babel、vue.js。
397 天前 / Ryan众乐
AlienZHOU快手 前端工程师 246 人赞同了该文章近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。 snowpack 的代码很轻量，本文会从实现原理的角度介绍 snowpack 的特点。同时，带大家一起看看，作为一个以原生 JavaScript 模块化为核心的年轻的构建工具，它是如何实现“老牌”构建工具所提供的那些特性的。 1. 初识 snowpack 近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。
402 天前 / 嘉民617
点击前端充电营，关注我们 前言 上一篇文章我们介绍了 webpack 的安装和使用，没有看过的小伙伴可以从下面链接进入。 webpack 学习教程（二）：起步 2020-06-13 为了方便小伙伴们的学习，每一章我都会把当前 demo 的项目代码放在百度云盘上，想要的小伙伴直接公众号里面回复“webpack 学习教程” + 当前章节，例如：“webpack 学习教程三”即可领取当前章节所涉及的 demo 代码。方便小伙伴们快速上手。 处理图片 图片是网页中最常见的资源之一，我们有必要知道如何用 webpack 来处理。最常见的引入图片的方式有两种：css 背景图片和 img 标签。