在现代前端开发中，模块化开发是不可或缺的一部分。Webpack作为一个强大的打包工具，提供了很多高级特性来简化和优化我们的开发流程。其中一个非常有用的功能是require.context。本文将介绍require.context的使用方法及其在实际项目中的应用。什么是require.contextrequire.co

总体简单来说：Webpack通过内部的事件流机制，保证了插件的有序性Webpack底层利用了发布订阅模式，在运行过程中会广播事件Webpack插件只需要监听它所关心的事件，在特定的时机对资源做处理站在代码逻辑的角度：Webpack在编译过代码程中，会触发一系列Tapable钩子事件插件需

所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象constwebpack=require("webpack")newwebpack.插件名(options)DefinePlugin全局常量定义插件，使用该插件通常定义一些常量值，例如：newwebpack.DefinePlugin({PI:`Math.PI`,/

constpath=require('path')constUglifyPlugin=require('uglifyjs-webpack-plugin')module.exports={publicPath:'./',//基本路径outputDir:'dist',//输出文件目录lintOnSave:false,//eslint-loader是否在保存的

Gzip压缩前端页面文件缓存我们先来简单回顾下http缓存的知识：HTTP1.0是通过Expires（文件过期时间）和Last-Modified（最近修改时间）来告诉浏览器进行缓存的，这两个字段都是UTC时间（绝对时间）。Expires过期控制不稳定，因为浏览器端可以随意修改本地时间，导致缓存使用不精准。而且L

随着Web应用的日益复杂化，用户对页面加载速度的期望越来越高。在这种背景下，前端性能优化成为了开发者们必须面对的挑战。Vue.js，作为现代前端开发的首选框架之一，其轻量级和灵活性为构建高性能的Web应用提供了可能。然而，即使是使用Vue.js，如果不进行适当的优化，应用的加载时间和

什么是DLLDllPlugin和DllReferencePlugin提供了拆分包的方法，可以极大地提高构建时性能。术语DLL代表动态链接库，它最初是由Microsoft引入的。.dll为后缀的文件称为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据把基础模块独立出来打包到单独的动态连接库

在代码中使用webpack来作为构建工具,使用npmrunserver也就是webpackserver的时候,会启动一个开发服务器,会运行类似于打包的行为(在这里我们比喻成打包),转换成可以直接运行的代码,这写代码不会生成文件,而是会运行在内存中,然后webpack会给你一个本地的地址,可以直接在浏览

React教程|菜鸟教程快速入门–React中文文档 nodejsNode.js教程|菜鸟教程【cnpm】cnpm的安装方法（附详细步骤）_cnpm安装-CSDN博客  ReactHooksReact内置Hook–React中文文档Webpack 配置概念|webpack中文文档|webpack中文文档|webpack中文网

分析webpack编译结果,实现__webpack_require__函数本篇文章我们通过手写来分析一下Webpack打包后的代码,并研究一下Webpack是如何将多个模块合并在一起的首先控制台输入npminit-y初始化一个项目,再输入npmiwebpackwebpack-cli-D安装Webpack在src目录想创建入

前情uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验非常棒，公司项目就是主推uni-app。坑位随着项目越做越大，发现小程序的包体积已经超过了小程序单包最高2M的限制，于是对项目进行了分包处理，在分包过种中真正占项目体

Webpack简介Webpack是基于模块化的打包（构建）工具，它把一切视为模块；它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列过程（压缩，合并），最终生成运行时态的文件。webpack的特点：为前端工程化而生：webpack致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让

pluginloader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如：当webpack生成文件时，顺便多生成一个说明描述文件当webpack编译启动时，控制台输出一句话表示webpack启动了当xxxx时，xxxx这种类似的功能需要把功能嵌入到webpack的编译流程中，而这种事情的实现是依托于

解决方法一：重新运行：npmrunserve(每个人情况不定）解决方法二：可能是文件中有中文名，将该项目文件名称及该项目文件的上一层命名为纯英文。重新：npmrunserve解决方法三：修改相关的 webpack 配置文件把 index.html 文件重命名为 index.ejs 文件在 node_nodul

安装Jest和相关依赖首先，安装Jest和TypeScript的Jest预处理器ts-jest以及类型定义文件。npminstall--save-devjestts-jest@types/jest初始化Jest配置使用ts-jest初始化Jest配置文件。npxts-jestconfig:init这会生成一个基本的Jest配置文件jest.co

作用就是一个静态模块打包工具，专门用来打包静态模块的概念入口（entry）：入口起点，即构建的起始文件输出(output):构建输出的文件名和路径loader：webpack本身只能处理JavaScript和JSON文件，其他类型的文件交给loader来转换插件模式浏览器兼容性环境补充模块：在模块化编

react脚手架create-react-app(v5.0.1)临时安装create-react-app(node>14)，通过create-react-app创建一个纯前端react项目npxcreate-react-appapp_01完成后package.json内容{"dependencies":{"@testing-library/jest-dom":"^5.17.0",

一、是什么HMR全称 HotModuleReplacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失如果使用的是 HMR，就可以实现只

微前端用通俗易懂的话来说就是：一个主应用（基座）中可以搭建多个子应用（微应用），这些子应用可以是不同版本，不同前端框架，而且跟主应用的语言无关，主应用仅仅是一个基座。正常一个项目想要展示另一个项目，通常会用iframe进行嵌入，但是相比iframe，qiankun等微前端的接入表现形式会更加友好，

一、区别前面两节我们有提到Loader与Plugin对应的概念，先来回顾下loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中plugin赋予了webpack各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决loader

本文基于：[email protected]@2.5.2vuecreate和init的区别是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。vuecreatedemo 使用create命令搭建vueinit是vue-c

一、webpack打包过程。首先读取配置文件，确定入口文件及其依赖关系，然后，从入口文件开始，递归解析所有模块，通过相应的加载器（loaders）处理不同类型的文件内容，如Javascript、css等。接着，使用插件（plugins）执行额外的任务，如代码压缩、环境变量注入等。最后，将处理后的模块按照指定的格式

VueCLI3快速启动指南（全）原文：zh.annas-archive.org/md5/31ebad88f7990ce0d7b13055dbe49dcf译者：飞龙协议：CCBY-NC-SA4.0前言Vue最初是由一个人EvanYou发起的项目。令人惊讶的是，它已经发展到今天这个地步：成为最受欢迎的前端框架之一，与由公司支持的React和Angular竞

一、是什么webpackproxy，即webpack提供的代理服务基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制）想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-serverwebpack-dev-se