女王控的博客

webpack

12 篇文章

Webpack 深入学习

基础 简介 entry(入口) 入口起点(entry point)即是 webpack 通过该起点找到本次项目所直接或间接依赖的资源(模块、库等),并对其进行处理,最后输出到 bundle 中。入口文件由用户自定义,可以是一个或者多个,每一个 entry 最后对应一个 bundle。 output(出口) 通过配置 output 属性可以告诉 webpack 将 bundle 命名并输出到对应的位置。 loader webpack 核心,webpack 本身只能识别 js 文件,对于非 js… »

深入理解 Webpack 源码

webpack 构建后代码 打包单一模块 webpack.config.js chunk1.js 打包后,main.js(webpack 生成的一些注释已经去掉) 这其实就是一个立即执行函数,简化一下就是: 看一下自运行的匿名函数里面干了什么: 整个函数里就声明了一个变量 installedModules 和函数 ,并在函数上添加了一个 m,c,p 属性,m 属性保存的是传入的模块数组,c 属性保存的是 installedModules 变量,P… »

Webpack原理入门

概括 Webpack 以其使用简单著称,在使用它的过程中,使用者只需把它当作一个黑盒,需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒,看看 Webpack 是如何运行的。 基本概念 在了解 Webpack 原理前,需要掌握以下几个核心概念,以方便后面的理解: Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry… »

Module federation 原理研究

首先了解一下 webpack 的打包原理 webpack 的打包原理 chunk 和 module webpack 里面有两个很核心的概念,叫 chunk 和 module,这里为了简单,只看 js 相关的,用笔者自己的理解去解释一下他们直接的区别: module:每一个源码 js 文件其实都可以看成一个 module chunk:每一个打包落地的 js 文件其实都是一个 chunk,每个 chunk 都包含很多 module 默认的 chunk 数量实际上是由你的入口文件的 js… »

客服新窗口技术探索

需求背景 由于客服聊天组件需要支持以新窗口的形式打开,也就是以 window.open 的新窗口打开,同时需要支持嵌入公司自己的产品端,在技术攻关的过程中遇到很多问题,特此记录 问题及解决方案 标记为横线的为完成需求后发现现阶段不需要做的 跨域窗口间的通信: 编写底层通信库 、通过 url 传递 嵌入公司产品端:独立客服聊天组件的运行环境 设置新窗口位置:需要注意兼容分屏情况 监听新窗口打开情况: 通过底层库发消息 、获取 window.open 的 closed… »

0%