30 天前 / 冷星1024
我们所知道的本地服务，资源的压缩，代码分割，在 webpack 构建的工程中有一个比较显著的特征是，模块化，要么 commonjs 要么 esModule,在开发环境我们都是基于这两种，那么通过 webpack 打包后，如何让其支持浏览器能正常的加载两种不同的模式呢？ 接下来我们一起来探讨下 webpack 中打包后代码的原理 正文开始。.. 初始化基础项目新建一个文件夹 webpack-05-module， npminit-y 我们安装项目一些基础支持的插件 npmiwebp[email protected]babel l/core-D 在根目录新建 webpack.config.js，配置相关参数...
52 天前 / 冷星1024
前言本文会带你简单的认识一下 webpack 的 loader，动手实现一个利用 md 转成抽象语法树，再转成 html 字符串的 loader。顺便简单的了解一下几个 style-loader，vue-loader，babel-loader 的源码以及工作流程。 loader 简介 webpack 允许我们使用 loader 来处理文件，loader 是一个导出为 function 的 node 模块。可以将匹配到的文件进行一次转换，同时 loader 可以链式传递。loader 文件处理器是一个 CommonJs 风格的函数，该函数接收一个 String/Buffer 类型的入参，并返回一个 String/Buffer 类型的返回值。
100 天前 / 冷星1024
今天我们一起探讨学习下 webpack5 中关于 Asset Modules[1]的那些事 初始化基础项目新建一个文件夹 webpack-04-resource， npminit-y 我们安装项目一些基础支持的插件 npmiwebp[email protected]babel l/core-D 在根目录新建 webpack.config.js constpath=require('path'); constHtmlWebpackPlugin=require('html-webpack-plugin'); const{CleanWebpackPlugin}=require('clean-webpack-plugin'); module.exports={ entry:'./src/index.js', output:{ filename:'js/[name].js', path:path.resolve(__dirnam...
129 天前 / 冷星1024
编译速度一直是困扰开发者的头等问题，现阶段大型 Taro 项目即使在增加了 cache-loader、thread-loader 等优化手段后，编译耗时仍高居不下。因此在 v3.5 版本中 Taro 重点对编译系统进行了重构，引入对 Webpack5 的支持，改善小程序 & H5 编译时的性能与体验。（除此之外，Taro 也正在落地对于 Vite 的支持，届时开发者将可以自由地选择编译工具。） 同时，Taro v3.5 还带来了兼容 React 18、H5 MPA 等新特性，欢迎各位同学升级试用~ 一、编译提速—为了改善编译性能...
143 天前 / 冷星1024
Module Federation 是 webpack5 中振奋人心的新特性，也是号称能改变 JavaScript 架构游戏规则的功能。接下来让我们慢慢揭开 Module Federation 的神秘面纱 模块共享的方案对比 场景：目前拥有项目 A 和项目 B，我们发现它们存在一定的共性，比如公共 UI 组件、utils 等。那我们如何同享这些公共信息呢？ 简单粗暴 -CV 大法直接将项目 A 的组件，copy 到项目 B 中，这样的方式有时候是比较快的，但也存在维护性极低的问题，后续两个项目都各自维护一套 抽象成 npm 我们可以将一些公共的模块抽象成 npm，每个项目都去安装该 npm 包...
205 天前 / 冷星1024
一、Tapable 介绍 Tapable 是 Webpack 整个生命周期及其插件机制的事件流实现，它提供了多种形式的发布订阅模式的 API，我们可以利用它来注册自定义事件，并在不同的时机去触发。 Tapable 对外提供了如下几种钩子（Hooks）： const{ SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, AsyncSeriesBailHook, AsyncSeriesWaterfallHook }=require("tapable"); 每个钩子拥有自己专属的事件执行机制和触发时机，Webpack 正是利用它们，在不同的编译阶段来调用各插件回调...
314 天前 / 楼外青山
这是第122篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：Webpack原理—如何实现代码打包 https://zoo.team/article/webpack-reason 前言作为一个前端“攻城狮”，Webpack 再熟悉不过了，Webpack 能做的事太多了，可以将所有资源（包括 JS，TS，JSX，图像，字体和 CSS 等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。
320 天前 / 冷星1024
最近粗略阅读了一下 Webpack 的源码，对其打包的流程有了一定的了解，接下来结合源码，和大家分享一下 webpack 的打包流程；同时在文章最后，会有一个简易的 Webpack 的实现，提供大家参考和学习~ Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。它将你项目中所需的每一个模块组合成一个或多个 bundles，用于在浏览器使用 PS：本次分享阅读的是 webpack4 的源码，当前最新的 webpack5[1]对比 4 版本有很多升级和调整，但是大体的流程差别不大...
388 天前 / Ryan众乐
1 背景相信对于每个刚接触构建的同学来说， webpack 都是难以跨越的一道坎，它凭着抽象的概念、“言简意赅” 的文档，难倒了一众英雄好汉。 由于自己平时从零手写 webpack 配置的机会比较少，所以对 webpack 里的一些配置不都是特别清楚。 最近的一个需求需要给页面资源增加 md5 版本号，我正好借着这个机会，把项目里的 webpack 配置都重新梳理了一遍。 本文对于基本的配置概念（如 entry 、 output 等）就不一一赘述了，着重介绍的是splitChunks和manifest两部分内容。
417 天前 / Ryan众乐
首发于一道题做一宿写文章 Webpack 的 ModuleFederation 原理分析及发散啦啦啦啦怡途数字科技集团有限公司 前端工程师 2 人赞同了该文章前言前几天我们稍微尝试了一下 Webpack 提供的新能力 Module Federation，它为我们代码共享跟团队协作提供了新的可能性。之前若是我们项目 A 跟项目 B 有一些共同的逻辑，那我们可能会选择把它抽成一个 npm 包，然后在两个项目间引入。但是这有个缺点是只要 npm 包更新，我们的项目就需要重新打包来引入公共逻辑的更新，哪怕项目里一行代码没改。
525 天前 / 江米小枣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,[email protected]@ "modules":false, "targets":"last2ye...
570 天前 / 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 版本。
582 天前 / 冷星1024
本文作者：Wind、Skyler、ZRJ、ZJ 前言 Webpack5 在 2020 年 10 月 10 日正式发布，并且在过去的几个月中快速演进和迭代，截止 1 月 28 日，Webpack5 已经更新了 18 个 minor 版本，带来了许多十分吸引人的新特性。据官网介绍 [1]，Webpack5 整体的方向性变化有以下几点： 通过持久化硬盘缓存能力来提升构建性能通过更好的算法来改进长期缓存（降低产物资源的缓存失效率）通过更好的 Tree Shaking 能力和代码的生成逻辑来优化产物的大小改善 web 平台的兼容性能力清除了内部结构中...
595 天前 / 西岭老湿
首发于西岭老湿写文章 Webpack 5 新特性尝鲜西岭老湿一个普通文艺码农安装与启动 Webpack 5 发布已经有一段时间了，很多小伙伴都在考虑要不要升级，有没有升级的必要，不知道升级后有哪些改变； 今天我们就来做个对比看看，webpack5 带来了那些全新的改变； 没有对比就没有伤害，为了更好地伤害 webpack 4 , 我们使用 webpack4 和 webpack 5 分别构建一个 React 项目来做对比： mkdir webpack4mkdir webpack5# 分别执行 初始化命令 npm init -y 创建文件 /src/index.js， /src/App.js...