随笔分类 -  webpack

摘要:项目背景 随着业务的积累,前端项目之间逐渐会产生许多可以跨项目复用的逻辑或组件。比如对前端数据库 indexedDB 的封装、对 fetch 请求进度和中断请求功能的扩展、以及可能会在多个项目使用的 react 和 vue 组件。当前已经有一个公共库专门用来收敛 js 的逻辑复用,但是随着相同技术栈 阅读全文
posted @ 2023-11-27 16:55 柯基与佩奇 阅读(119) 评论(0) 推荐(0) 编辑
摘要:webpack5 已经发布,将主要涉及的新特性及这些特性的使用方法总结了一下。 英文文档地址:webpack 中文文档地址:webpack.docschina github 地址:github 1、内置静态资源构建能力 —— Asset Modules 在 webpack 5 之前,通常使用: ra 阅读全文
posted @ 2023-11-17 17:25 柯基与佩奇 阅读(55) 评论(0) 推荐(0) 编辑
摘要:用过 webpack 的都知道,webpack 的 sourcemap 配置是比较麻烦的,比如这两个配置的区别: eval-nosources-cheap-module-source-map hidden-module-source-map 是不是分不清楚? 其实它是有规律的。 把配置写错的时候,w 阅读全文
posted @ 2023-11-17 17:25 柯基与佩奇 阅读(41) 评论(0) 推荐(0) 编辑
摘要:Babel 的包构成 核心包 babel-core:babel 转译器本身,提供了 babel 的转译 API,如 babel.transform 等,用于对代码进行转译。像 webpack 的 babel-loader 就是调用这些 API 来完成转译过程的。 babylon:js 的词法解析器 阅读全文
posted @ 2023-11-17 17:25 柯基与佩奇 阅读(45) 评论(0) 推荐(0) 编辑
摘要:一次完整的 webpack 打包大致是这样的过程: 将命令行参数与 webpack 配置文件 合并、解析得到参数对象。 参数对象传给 webpack 执行得到 Compiler 对象。 执行 Compiler 的 run 方法开始编译。每次执行 run 编译都会生成一个 Compilation 对象 阅读全文
posted @ 2023-11-17 17:24 柯基与佩奇 阅读(13) 评论(0) 推荐(0) 编辑
摘要:Webpack 中的静态资源文件指纹 在 webpack 中如何给静态资源加 hash 值:每次构建过程都会生成一个新的 hash,所以一般用于做版本控制;chunkhash 是基于内容生成的,但是 webpack 把所有类型的文件都以 js 为汇聚点打成一个 bundle,改了 css 也会导致整 阅读全文
posted @ 2023-11-17 17:24 柯基与佩奇 阅读(290) 评论(0) 推荐(0) 编辑
摘要:(面试)说一下 webpack 的热更新原理? webpack 通过 watch 可以监测代码的变化;webpack-dev-middleware 可以调用 webpack 暴露的 API 检测代码变化,并且告诉 webpack 将代码保存到内存中;webpack-dev-middleware 通过 阅读全文
posted @ 2023-11-17 17:24 柯基与佩奇 阅读(16) 评论(0) 推荐(0) 编辑
摘要:All in One 的弊端 通过 Webpack 实现前端项目整体模块化的优势固然明显,但是它也会存在一些弊端:它最终会将所有的代码打包到一起。试想一下,如果应用非常复杂,模块非常多,那么这种 All in One 的方式就会导致打包的结果过大,甚至超过 4 ~ 5M。 在绝大多数的情况下,应用刚 阅读全文
posted @ 2023-11-17 17:23 柯基与佩奇 阅读(123) 评论(0) 推荐(0) 编辑
摘要:前言 前端在做性能优化的时候,其中一种有效的方式就是减少包体积的大小。而减少包体积大小的其中一种有效的方式就是 tree-shaking,翻译成中文就是摇树。这个词非常形象,当果树结果后,如果用力摇树,那些成熟了但是还挂在树上的果子就会掉下来,减轻树的负担,因为果子已经成熟了,没有必要在呆在树上了。 阅读全文
posted @ 2023-11-17 17:23 柯基与佩奇 阅读(66) 评论(0) 推荐(0) 编辑
摘要:动态的引入图片为什么要使用 require 因为动态添加 src 被当做静态资源处理了,没有进行编译,所以要加上 require 乍一看好像说的很有道理啊,但是仔细一看,这句话说的到底是个啥?针对上面的回答,不禁有如下几个疑问: 什么是静态资源? 为什么动态添加的 src 会被当做的静态的资源? 没 阅读全文
posted @ 2023-11-17 17:23 柯基与佩奇 阅读(38) 评论(0) 推荐(0) 编辑
摘要:webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 前 阅读全文
posted @ 2023-11-17 17:23 柯基与佩奇 阅读(51) 评论(0) 推荐(0) 编辑
摘要:编写一个loader 在平时自己由零搭建项目时,虽然基础配置都比较熟悉,比如配置 file-loader, url-loader, css-loader 等,配置不难,但究竟是怎么起作用的呢,如何编写一个 Webpack Loader。 loader 通常指打包的方案,即按什么方式来处理打包,打包的 阅读全文
posted @ 2023-11-17 17:22 柯基与佩奇 阅读(10) 评论(0) 推荐(0) 编辑

欢迎阅读『webpack』
点击右上角即可分享
微信分享提示