![](https://img-blog.csdnimg.cn/69e3ce7c975742109ddf119bde1b24c6.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
文章平均质量分 81
Webpack
__畫戟__
前端。知之为知之,不知为不知
展开
-
webpack 实现 BannerWebpackPlugin
BannerWebpackPlugin 插件用于给打包产物头部添加注释文本原创 2023-05-25 13:54:13 · 232 阅读 · 0 评论 -
webpack 实现 CleanWebpackPlugin
手写CleanWebpackPlugin,用于删除/清理构建文件夹。原创 2023-05-25 01:47:16 · 261 阅读 · 0 评论 -
webpack 实现 CopyWebpackPlugin
CopyWebpackPlugin 将已经存在的单个文件或整个目录复制到构建目录。原创 2023-05-25 00:52:48 · 1140 阅读 · 0 评论 -
webpack 自定义loader
让我们实现一些简易的loader,从大量的简易loader的实现过程中学习编写如何 webpack loader原创 2023-05-23 00:47:22 · 684 阅读 · 1 评论 -
package-cli-service,为构建发布npm包提供完整的工作流
【package-cli-service】为构建发布 npm 包的全流程提供了完整的工作流,。它是构建于rollup、 webpack之上的。它包含了:一个针对绝大部分应用优化过的内部的 rollup 配置;它提供了 serve-example、build-example、lint、fix、analyzer、build 、pub 、serve-storybook、build-storybook 等命令原创 2023-04-10 22:00:50 · 332 阅读 · 0 评论 -
webpack-chain
webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说还是 OK 的,但当你尝试跨项目共享这些对象并使其进行后续的修改就会变的混乱不堪,因为您需要深入了解底层对象的结构以进行这些更改。webpack-chain 尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。API的 Key 部分可以由用户指定的名称引用,这有助于 跨项目修改配置方式 的标准化。转载 2023-03-15 20:41:00 · 2854 阅读 · 0 评论 -
webpack 编写插件
webpack 插件由以下组成:一个 JavaScript 命名函数或 JavaScript 类。在插件函数的 prototype 上定义一个 apply 方法。指定一个绑定到 webpack 自身的事件钩子。处理 webpack 内部实例的特定数据。功能完成后调用 webpack 提供的回调。原创 2023-02-01 21:21:36 · 510 阅读 · 0 评论 -
tapable详解
这个小型库是 webpack 的一个核心工具,但也可用于其他地方, 以提供类似的插件接口。 在 webpack 中的许多对象都扩展自 Tapable 类。 它对外暴露了 tap,tapAsync 和 tapPromise 等方法, 插件可以使用这些方法向 webpack 中注入自定义构建的步骤,这些步骤将在构建过程中触发。原创 2023-01-31 19:58:48 · 451 阅读 · 0 评论 -
webpack 如何编写 loader
loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 Loader API,并通过 this 上下文访问。1. 当一个 loader 在资源中使用,这个 loader 只能传入一个参数 - 一个包含资源文件内容的 字符串 2. loader 会返回一个或者两个值。第一个值的类型是 JavaScript 代码的字符串或者 buffer3. 最后一个 loader 可以返回任意类型的模块原创 2023-01-08 20:38:55 · 914 阅读 · 0 评论 -
webpack-dev-server 和webapck --watch的区别
webpack-der-server 监测到代码变化后,浏览器可以看到及时更新的效果,但是并没有自动打包修改的代码;webpack --watch 在监测到代码变化后自动打包修改的代码转载 2022-11-10 22:10:35 · 190 阅读 · 0 评论 -
webpack高级应用篇(十六):依赖管理
const files = require.context('./modules', false, /\.js$/)原创 2022-07-28 21:27:31 · 354 阅读 · 0 评论 -
webpack高级应用篇(十五):基于 Promise 的动态 Remote,让模块联邦版本化
基于 Promise 的动态 Remote,让模块联邦版本化原创 2022-07-24 18:01:56 · 1028 阅读 · 2 评论 -
webpack5 打包之后还有箭头函数问题
webpack5 打包之后还有箭头函数问题,修改构建目标 `target`原创 2022-07-09 12:22:29 · 962 阅读 · 0 评论 -
webpack高级应用篇(十四):splitChunks.chunks 中的 async、initial 和 all
webpack官方文档中对于splitChunks.chunks只说明了 async 是默认的选项,关于 async、initial 和 all 之间的区别却没有很好的进行举例解释。今天我们将来探讨一下这三者的区别。async表示动态引入的模块将会被拆分;initial表示不会将动态引入和静态引入的同一模块一起处理,而是分开处理。;all对所有类型的模块进行拆分原创 2022-05-01 15:16:45 · 2116 阅读 · 2 评论 -
webpack高级应用篇(十三):模块联邦(Module Federation)- 未来组件包更新解决方案
Webpack 5 增加了一个新的功能 “模块联邦”,它让 Webpack 达到了线上 Runtime 的效果,让代码直接在项目 间利用 CDN 直接共享,不再需要本地安装 Npm 包、构建再发布了!它是未来多个项目更新组件包的新的解决方案!......原创 2021-12-22 14:33:49 · 6089 阅读 · 14 评论 -
webpack高级应用篇(十二):创建 library
除了打包应用程序,`webpack` 还可以用于打包` JavaScript library`。以下适用于希望简化打包策略的 library 作者。原创 2021-12-20 17:19:10 · 1411 阅读 · 0 评论 -
webpack高级应用篇(十一):Polyfills
社区中存在许多误解,即现代浏览器“不需要”polyfill,或者 polyfill/shim 仅用于添加缺失功能 - 实际上,它们通常用于修复损坏实现(repair broken implementation),即使是在最现代的浏览器中,也会出现这种情况。 因此,最佳实践仍然是,不加选择地和同步地加载所有 polyfill/shim,尽管这会导致额外的 bundle 体积成本。原创 2021-12-18 18:11:52 · 2325 阅读 · 0 评论 -
webpack高级应用篇(十):渐进式网络应用程序PWA(Service Workers)
渐进式网络应用程序(progressive web application - PWA),是一种可以提供类似于native app(原生应用程序) 体验的 web app(网络应用程序)。PWA 可以用来做很多事。其中最重要的是,在离线时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。原创 2021-12-16 00:25:31 · 1447 阅读 · 0 评论 -
webpack高级应用篇(九):tree shaking(usedExports) 与 sideEffects
你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库),是树上活的树叶。灰色表示未引用代码,是秋天树上枯萎的树叶。为了除去死去的树叶,你必须摇动这棵树,使它们落下。*tree shaking* 是一个术语,通常用于描述**移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 [静态结构]特性,例如 import、export原创 2021-12-14 11:05:16 · 3287 阅读 · 4 评论 -
webpack高级应用篇(八):多页面应用程序
尽管单页面应用很流行,但是我们并不总是需要它。在多页面应用程序中,server 会拉取一个新的 HTML 文档给你的客户端。页面重新加载此新文档,并且资源被重新下载。然而,这给了我们特殊的机会去做很多事,例如使用 为页面间共享optimization.splitChunks的应用程序代码创建 bundle。由于入口起点数量的增多,多页应用能够复用多个入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益。原创 2021-12-11 22:39:44 · 1113 阅读 · 1 评论 -
webpack高级应用篇(七):在 webpack 工程化环境中集成 TypeScript
如何在 webpack 工程化环境中集成 TypeScript?webpack + TypeScript + ESLint原创 2021-12-11 11:27:17 · 481 阅读 · 0 评论 -
webpack高级应用篇(六):PostCSS 与 CSS Modules
PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。比如可以使用 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮我们自动的 为 CSS 规则添加前缀,将最新的 CSS 语法转换成大多数浏览器都能理解的语法。CSS Modules解决css命名冲突问题,让你放心优雅的写css。原创 2021-12-10 17:39:53 · 1492 阅读 · 0 评论 -
weboack高级应用篇(五):打包结果分析 - 依赖图(dependency graph)
每当一个文件依赖另一个文件时,webpack 都会将文件视为直接存在 *依赖关系*。这使得 webpack 可以获取非代码资源,如 images 或 web 字体等。并会把它们作为 *依赖* 提供给应用程序。当 webpack 处理应用程序时,它会根据命令行参数中或配置文件中定义的模块列表开始处理。 从 入口开始,webpack 会递归的构建一个 *依赖关系图*,这个依赖图包含着应用程序中所需的每个模块,然后将所有模块打包为少量的 *bundle* —— 通常只有一个 —— 可由浏览器加载。原创 2021-12-08 22:06:45 · 1711 阅读 · 0 评论 -
Webpack高级应用篇(四):模块解析(Module Resolution)
resolver 帮助webpack 从每个 require/import 语句中,找到需要引入到 bundle 中的模块代码。当打包模块时,webpack 使用 enhanced-resolve 来解析文件路径。原创 2021-12-08 19:45:58 · 1165 阅读 · 0 评论 -
webpack高级应用篇(三):ESLint
本文介绍webpack 结合 ESLint 使用;主要解决安装ESLint、ESLint实时检查、IDE中使用ESLint、快捷修复;vscode eslint;webstorm eslint;eslint --fix;devServer.client.overlay;vue 官方: eslint-config-vue;ESLint常见问题及解决方案...原创 2021-12-07 10:30:17 · 2032 阅读 · 0 评论 -
webpack高级应用篇(二):devServer
开发环境下,我们往往需要启动一个web服务,方便我们模拟一个用户从浏览器中访问我们的web服务,读取我们的打包产物,以观测我们的代码在客户端的表现。通过 webpack-dev-server 的这些配置,能够以多种方式改变其行为。解释目测changeOrigin、pathRewrite 不生效的原因原创 2021-12-05 19:27:34 · 1745 阅读 · 0 评论 -
webpack高级应用篇(一):source map —— 增强调试过程
选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。原创 2021-12-05 19:14:24 · 1054 阅读 · 0 评论 -
webpack基础篇(七):拆分开发环境和生产环境配置
我们手工的调整 `mode` 选项,可以实现`生产环境`和`开发环境`的切换,但很多配置在生产环境和开发环境中存在不一致的情况,比如开发环境没有必要设置缓存,生产环境还需要设置公共路径等等。拆分开发环境和生产环境,让打包更灵活。原创 2021-12-02 09:49:45 · 1032 阅读 · 0 评论 -
webpack基础篇(六):缓存 caching(hash)
使用 webpack 来打包我们的模块化后的应用程序,webpack 会生成一个可部署的/dist目录,然后把打包后的内容放置在此目录中。只要/dist 目录中的内容部署到 server 上,client(通常是浏览器)就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的,这就是为什么浏览器使用一种名为 缓存 的技术。可以通过命中缓存,以降低网络流量,使网站加载速度更快,然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。由于原创 2021-12-01 13:25:35 · 859 阅读 · 0 评论 -
webpack基础篇(五):代码分离(Code Splitting)
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时间。常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代码。防止重复:使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离chunk。动态导入:通过模块的内联函数 import 调用来分离代码。原创 2021-12-01 01:14:19 · 2470 阅读 · 0 评论 -
webpack基础篇(四):babel-loader
webpack本身只能加载、打包js模块,并不能将一些代码转化为浏览器识别的代码。然而,浏览器对ES6这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行,Babel 应运而生。Babel是一个JavaScript编译器,能够让我们放心的使用新一代JS语法;babel-loader:在webpack里应用 babel 解析ES6的桥梁;@babel/core:babel核心模块;@babel/preset-env:babel预设,内置一组 babel 插件的集合;....原创 2021-11-30 16:59:24 · 2750 阅读 · 0 评论 -
webpack基础篇(三):管理资源(image、css、fonts、csv、json5)
管理资源:1. 处理资源 - loader;1.1 加载css - css-loader;1.2 处理less - less-loader;2. 加载css;2.1 抽离css;2.2 压缩css;3.压缩 js;4. 加载images图像;5. 加载 fonts 字体;6. 加载数据;6.1 自定义 JSON 模块 parser原创 2021-11-30 16:45:27 · 1001 阅读 · 0 评论 -
webpack基础篇(二):资源模块asset module(asset/resource、asset/inline、asset/source、asset)
资源模块:1. asset/resource;2. 自定义输出文件名;3. asset/inline;4. asset/source;5. asset 通用资源类型原创 2021-11-30 14:32:32 · 4894 阅读 · 0 评论 -
webpack基础篇(一):初识(概念、html-webpack-plugin、清理dist、source-map、webpack-dev-server)
在基础应用篇将学习到webpack的基础配置方案,掌握webpack的各种基础配置项所对应的功能。一. 安装webapck;二. 自定义webpack配置;三. 自动引入资源;四. 清理dist;五. mode选项;六. SourceMap;七. watch mode;八. webpack-dev-server;资源模块asset module原创 2021-11-29 20:10:51 · 788 阅读 · 2 评论 -
webpack 链式操作: webpack-chain
webpack-chain/README.md at zh-cmn-Hans · Yatoo2018/webpack-chain · GitHub原创 2021-10-06 15:46:30 · 839 阅读 · 0 评论 -
Vue通过 Babel 显式转译一个node_modules依赖
默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖,可以在这个选项中列出来。// vue.config.jsmodule.exports = { transpileDependencies: [ 'uview-ui' ]}原创 2021-08-05 21:47:41 · 1487 阅读 · 0 评论