webpack

mini webpack打包基础解决包缓存和环依赖

目录 正文 index.js 主入口文件 读主入口文件 对依赖文件进行读取操作 解决依赖成环问题 正文 本文带你实现 webpack 最基础的打包功能,同时解决包缓存和环依赖的问题 ~ 发车,先来看示例代码。 index.js 主入口文件 我们这里三个文件,index.js »

webpack面试题及答案实例分析

这篇“webpack面试题及答案实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“webpack面试题及答案实例分析”文章吧。 谈谈你对Webpac »

不借助脚手架手动搭建react项目(webpack5 + Antd4 + React18)

##前言 工作中发现很多同事在接到一个新项目时,总是基于现有项目复制一份配置文件,然后写自己的组件及业务代码,以至于项目中存在一些冗余的依赖及配置信息。并且由于已有项目的依赖包及插件比较老,新项目也一直没有得到更新。即使是自己搭建,为了省时省力,大多会选择通过React提供的脚手架create-re ... »

sweetdreamkx

webpack动态加载与打包方式

目录 webpack代码拆分 上下文模块(contextModule) 生成contextModule的方式 require(表达式) require.context()函数 import()函数 require.ensure()函数 含有环境变量的动态加载 webpack代码拆分 »

webpack自动打包功能实现

目录 一、了解webpack 二、在项目中安装和配置webpack 三、webpack的打包 四、webpack的自动打包 一、了解webpack 当前web开发面临的困境1.文件依赖关系错综复杂2.静态资源请求效率低3.模块化支持不友好4.浏览器对高级javascript特性兼容程度较低 »

webpack-bundle-analyzer 插件配置使用方法

目录 一、webpack-bundle-analyzer 是什么? 二、安装 三、使用方法 1. 作为插件使用 2. 作为CLI的一个工具 参考文章: 一、webpack-bundle-analyzer 是什么? webpack-bundle-analyzer 是 webpack 的 »

webpack-merge的使用教程

目录 为什么要用webpack-merge 安装 目录结构 为什么要用webpack-merge development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异 所以webpack的配置写的差距会非常的大 在开发环境中,我们需要:强大的 »

webpack自动刷新浏览器源码解析

目录 配置webpack热更新模式 源码解析 开启本地服务 监听编译完成 监听文件修改 向浏览器中插入客户端代码 在我们日常的前端开发过程中,在编辑器里只需要保存代码,浏览器就会自动刷新当前页面。这个过程被称为热更新。 其实实现这一功能需要两步: 监听代码的变化 自动刷新浏览器 下 »

Webpack之plugin的使用

什么是plugin? plugin是插件的意思,通常用于对现有的架构进行扩展。webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。 loader和plugin的区别: loader主要用于转换某些类型的模块,是一个加载器;plugin是插件,对webpac »

webpack前端应用之基础打包实现

目录 前言:初识 Webpack 5 一、前端工程化 1、webpack 2、webpack的使用:配置文件所需要的信息(五大配置属性) 3、示例 4、webpack中使用的loader 二、webpack配置详解 前言:初识 Webpack 5 webpack 是一个静态资源的打包 »

一文详解webpack中loader与plugin的区别

目录 一、Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二、Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: »

一文详解如何在基于webpack5的react项目中使用svg

本文主要讨论基于webpack5+TypeScript的React项目(cra、craco底层本质都是使用webpack,所以同理)在2023年的今天是如何在项目中使用svg资源的。 首先,假定您已经完成基于webpack5+TypeScript的React项目的搭建工作(如果您不太清楚搭建的背景, ... »

w4ngzhen React

Webpack提取页面公共资源的实现

目录 1. 利用html-webpack-externals-plugin 分离基础库 2. 利用SplitChunksPlugin 分离基础库 3. 利用SplitChunksPlugin 分离依赖包 4. 利用SplitChunksPlugin 分离页面公共文件 1. 利用html-we »

使用webpack配置react-hot-loader热加载局部更新

目录 webpack配置react-hot-loader热加载局部更新 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 react-hot-loader热加载不生效的可能问题 总结 webpack配置react-hot-loader热加载局部更新 有人会问 webpack-de »

Webpack自动清理打包目录的实现

目录 1. 通过 npm scripts 清理理构建目录; 2. 使用 clean-webpack-plugin 插件清理; Webpack在打包的时候,会在指定输出文件夹下面生成打包文件,但是上次打包的文件不会自动清理掉,每次手动删除会比较麻烦,为此,我们需要有一个自动清理的功能。常见的自动 »

Webpack打包时将文件内联方法实现

目录 1. 安装插件 2. 拆分需要内联的HTML片段 3. 利用插件内联HTML片段与JS插件 在编写前端代码时,有些文件作为单独的文件引用会更便于维护,但是有些文件却必须要内联。 文件内联的场景如下: 1. 页面加载时需要初始化的代码需要内联; 2. 一些上报与回传的打点的代码需要内 »

Webpack实现多页面打包的方法步骤

目录 1. 多页面应用(MPA)概念 2. 多页面打包基本思路 3. 多页面打包通用方案 4. 多页面打包实现 1. 多页面应用(MPA)概念 单页面在开发时会把所有的业务放在一个大的入口里面去,不同的子业务还是同一个URL地址,只不过后面的hash会有所不同。 多页面相对于单页面的区别 »

Webpack中的文件指纹的实现

目录 1. 什么是文件指纹? 2. 文件指纹有哪几种? 3. JS的文件指纹设置; 4. CSS的文件指纹设置; 5. 图片的文件指纹设置; 1. 什么是文件指纹? 文件指纹就是打包后输出的文件名的后缀,主要用来对修改后的文件做版本区分。 2. 文件指纹有哪几种? 1. Hash »

webpack自定义loader全面详解

目录 什么是loader? loader类型 如何指定loader类型 如何禁用一些loader? 开发自定义两个loader,并分别实现url-loader和file-loader file-loader url-loader 如何测试使用 什么是loader? 因为webpa »