当前位置：首页 > news >正文

前端项目打包生成 JS 文件的核心步骤

news 来源：原创 2025/9/12 22:21:11

前端项目打包生成 JS 文件的过程通常涉及以下核心步骤，以主流工具（如 Webpack、Vite、Rollup 等）为例：

一、项目准备阶段

项目结构
- 源代码目录（如 src/）包含 JS/TS、CSS、图片等资源
- 配置文件（package.json、webpack.config.js 或 vite.config.js）
- 第三方依赖声明（通过 node_modules/ 管理）
依赖安装
```
npm install  # 或 yarn/pnpm
```
- 安装项目依赖（包括打包工具如 webpack、babel 等开发依赖）

二、打包配置阶段

入口文件定义

// webpack.config.js 示例
module.exports = {entry: './src/index.js', // 单入口// 或entry: { main: './src/app.js',vendor: './src/vendor.js'}
};

模块依赖解析
- 通过 import/require 语句分析依赖树
- 支持 JS/TS/CSS/图片等文件的模块化引用

加载器（Loader）配置

module: {rules: [{test: /\.js$/,use: 'babel-loader', // 转译 ES6+ 代码exclude: /node_modules/},{test: /\.css$/,use: ['style-loader', 'css-loader'] // 处理 CSS}]
}

插件（Plugin）配置

plugins: [new HtmlWebpackPlugin({ template: './src/index.html' }), // 生成 HTMLnew CleanWebpackPlugin(), // 清理旧构建文件new MiniCssExtractPlugin() // 提取 CSS
]

代码优化配置
- 代码压缩（TerserPlugin）
- Tree Shaking（移除未使用代码）
- 代码拆分（Code Splitting）
- 缓存策略（文件名哈希）

三、打包执行阶段

启动打包命令

npm run build  # 通常映射到 webpack --mode production

依赖图构建
- 从入口文件开始递归分析所有依赖
- 生成模块依赖关系图（Dependency Graph）
资源处理流程
- JS/TS: 通过 Babel 转译、TypeScript 编译
- CSS: 通过 PostCSS 处理前缀、Sass/Less 预编译
- 静态资源: 图片字体等通过 url-loader/file-loader 处理
- 第三方库: 被合并到 vendor 文件或按需加载
代码优化处理
- 删除未引用代码（Dead Code Elimination）
- 压缩混淆（Minify & Obfuscate）
- 作用域提升（Scope Hoisting）
输出生成
- 生成打包后的 JS 文件（如 main.[hash].js）
- 生成关联的 HTML/CSS 文件
- 生成 Source Map 文件（可选）

四、输出结果

典型输出目录结构：

dist/
├── index.html
├── main.3a7b9e.js      # 应用主代码
├── vendor.1f8a3c.js    # 第三方库
└── assets/├── styles.css└── logo.png

五、高级特性（可选）

按需加载（Lazy Loading）

import('./module').then(module => {...}) // Webpack 自动代码分割

环境变量注入

// 通过 DefinePlugin 注入
process.env.NODE_ENV === 'production'

SSR/SSG 支持
- 生成服务端渲染包（如 Next.js/Nuxt.js）
- 静态站点生成（如 Gatsby/VuePress）

六、不同工具对比

工具特性	Webpack	Vite	Rollup
核心定位	全能型打包工具	基于 ESM 的现代工具链	库打包专家
打包方式	静态分析依赖	原生 ESM + 按需编译	Tree Shaking 优先
热更新速度	较慢（全量构建）	极快（按需编译）	不专注 HMR
配置复杂度	高	中	低

通过打包过程，开发者可以获得：

浏览器兼容性处理（通过 Babel 等）
资源优化（压缩、合并、缓存控制）
模块化开发体验
生产环境性能优化

前端项目打包生成 JS 文件的核心步骤

前端项目打包生成 JS 文件的过程通常涉及以下核心步骤，以主流工具（如 Webpack、Vite、Rollup 等）为例： 一、项目准备阶段项目结构源代码目录（如 src/）包含 JS/TS、CSS、图片等资源配置文件（pa…...

编程日记 2025/9/12 22:21:11

【Pandas】pandas Series fillna

Pandas2.2 Series Computations descriptive stats 方法描述Series.backfill(*[, axis, inplace, limit, …])用于填充 Series 中缺失值（NaN）的方法Series.bfill(*[, axis, inplace, limit, …])用于填充 Series 中缺失值（NaN）的…...

编程日记 2025/9/12 22:18:40

微信小程序自定义导航栏实现指南

文章目录微信小程序自定义导航栏实现指南一、自定义导航栏的需求分析二、代码实现1. WXML 结构2. WXSS 样式样式解析：3. JavaScript 逻辑三、完整代码示例四、注意事项与优化建议五、总结微信小程序自定义导航栏实现指南在微信小程序开发中，默认的导航栏样式可能无法满足所…...

编程日记 2025/9/12 22:16:22

GitCode 助力 python-office：开启 Python 自动化办公新生态

项目仓库：https://gitcode.com/CoderWanFeng1/python-office 源于需求洞察，打造 Python 办公神器项目作者程序员晚枫在运营拥有 14w 粉丝的 B 站账号 “Python 自动化办公社区” 时，敏锐察觉到非程序员群体对 Python 学习的强烈需求。在数字…...

编程日记 2025/8/26 12:13:31

C#开发的Base64编码及解码完整源码及注意事项

在软件开发时，经常用Base64编码和解码功能。本文介绍一个简单易用的Base64 编码和解码工具，顾名思义，就是简单快捷地进行 Base64 代码的解码或编码操作。您的数据可以轻松地编码为 Base64 编码，也可以解码为可读的格式。传输数据时…...

编程日记 2025/9/12 22:19:55

deepseek部署：ELK + Filebeat + Zookeeper + Kafka

编程日记 2025/9/8 17:20:58

[密码学实战]Java实现国密（SM2）密钥协商详解：原理、代码与实践

一、代码运行结果二、国密算法与密钥协商背景 2.1 什么是国密算法？国密算法是由中国国家密码管理局制定的商用密码标准，包括： SM2：椭圆曲线公钥密码算法（非对称加密/签名/密钥协商）SM3：密码杂凑算法（哈希）SM4：分组密码算法（对称加密）2.2 密钥协商的意义在安全…...

编程日记 2025/9/10 9:09:17

STM32学习——RTC实时时钟（BKP与RTC外设）

RTC实时时钟 RTC实时时钟想记录或读取日期和事件，就可以通过操作RTC实现 RTC与BKP和PWR经常同时出现一般情况下，VBTA是电池供电口，需要接备用电池在BKP备份寄存器写入两个数据，然后再读出之后显示，BKP的数据&a…...

编程日记 2025/9/12 12:06:43

SQL打折日期交叉问题

1. 数据结构：数据为平台商品促销数据表名：good_promotion 字段名：brand（品牌）、stt（打折开始日期）、edt（打折结束日期）。 2. 需求： ① 创建表 ② 计算每个…...

编程日记 2025/9/12 3:47:46

智能机器人加速进化：AI大模型与传感器的双重buff加成

Deepseek不仅可以在手机里为你解答现在的困惑、占卜未来的可能，也将成为你的贴心生活帮手！ 2月21日，追觅科技旗下Dreamehome APP正式接入DeepSeek-R1大模型，2月24日发布的追觅S50系列扫地机器人也成为市面上首批搭载DeepSeek-R1的…...

编程日记 2025/9/9 15:09:45

AI大模型-提示工程学习笔记21-图提示 (Graph Prompting)

目录 1. 图提示的核心思想 (1) 传统提示的局限性 (2) Graph Prompting 的解决方案 2. Graph Prompting 的工作流程 (1) 图构建 (2) 图选择/子图提取 (3) 图编码 (4) 提示构建 (5) LLM 推理与生成 3. Graph Prompting 的关键组件 (1) 大语言模型 (LLM) (2) 图数据库…...

编程日记 2025/9/10 12:56:47

C++ 中的 for 循环语句教程

摘要 for 循环是 C 中最常用的循环结构之一，用于重复执行一段代码，直到满足特定条件。它特别适合在已知循环次数的情况下使用。本教程将详细介绍 for 循环的语法、用法以及一些常见示例。 1. for 循环的基本语法 for 循环的语法如下： for …...

编程日记 2025/9/10 20:13:31

UniApp 中封装 HTTP 请求与 Token 管理（附Demo）

目录 1. 基本知识2. Demo3. 拓展 1. 基本知识从实战代码中学习，上述实战代码来源：芋道源码/yudao-mall-uniapp 该代码中，通过自定义 request 函数对 HTTP 请求进行了统一管理，并且结合了 Token 认证机制请求封装原理&#xff…...

编程日记 2025/9/8 1:43:30

pip install paddlehub hub install chinese_ocr_db_crnn_mobile 提示错误： TypeError: Descriptors cannot be created directly. If this call came from a _pb2.py file, your generated code is out of date and must be regenerated with protoc > 3.19.0…...

编程日记 2025/9/10 21:12:02

机器学习--（随机森林，线性回归）

一、集成学习方法之随机森林集成学习的基本思想就是将多个分类器组合，从而实现一个预测效果更好的集成分类器。集成算法可以说从一方面验证了中国的一句老话：三个臭皮匠，赛过诸葛亮。集成算法大致可以分为：Bagging，B…...

编程日记 2025/9/9 15:46:38

和鲸科技推出人工智能通识课程解决方案，助力AI人才培养

2025年2月，教育部副部长吴岩应港澳特区政府邀请，率团赴港澳宣讲《教育强国建设规划纲要 (2024—2035 年)》。在港澳期间，吴岩阐释了教育强国目标的任务，并与特区政府官员交流推进人工智能人才培养的办法。这一系列行动体现出人工智…...

编程日记 2025/9/12 8:41:51

从暴力破解到时空最优：LeetCode算法设计核心思维解密

一、算法优化金字塔模型（时间复杂度/空间复杂度协同优化） 1.1 复杂度分析的本质大O记号的三层认知： ① 理论复杂度边界（理想模型） ② 硬件架构影响（缓存命中率/分支预测） ③ 语言特性损耗&am…...

编程日记 2025/9/7 7:40:08

关于在java项目部署过程MySQL拒绝连接的分析和解决方法

前言在最近一次部署项目一次项目部署过程中，由于没有对MySQL数据库的部分权限和远程连接进行授权，导致了在执行项目功能API时，出现MySQL连接异常或MySQL拒绝连接的问题。问题以下是部分报错截图： 分析根据日志提示&#xf…...

编程日记 2025/9/8 12:49:21

『抓包工具』安卓抓包小黄鸟 lsp过检测雷电模拟器root（保姆级图文）

目录准备工作雷电9.0.74 64位下载对应工具通过面具鸭安装面具安装防检测模块设置Zygisk安装小黄鸟简易抓包教程总结欢迎关注『抓包工具』专栏，持续更新中欢迎关注『抓包工具』专栏，持续更新中请注意不要随便升级雷电模拟器了不然你需要重新通过面具鸭安装面具准备工…...

编程日记 2025/9/9 4:24:07

k8S通过代理将集群外的中间件引入集群内访问 —— 筑梦之路

背景说明有部分中间件是跑在Kubernetes集群之外，我们希望通过service的方式来访问集群外的中间件，比如访问我们k8s集群外的elasticsearch集群。 ES节点本身又处在一个负载均衡IP：192.168.100.100 之后，但是代理的端口号是9202&am…...

编程日记 2025/9/10 18:47:22

【考试大纲】高级系统架构设计师考试大纲

目录引言一、考试说明1．考试目标2．考试要求3．考试科目设置二、考试范围考试科目1：系统架构设计综合知识考试科目2:系统架构设计案例分析考试科目3:系统架构设计论文引言最新的系统架构设计师考试大纲出版于 2022 年 11 月，本考试大纲基于此版本整理。一、考试说明…...

编程日记 2025/9/10 7:06:57

三个小时学完vue3 —— 简单案例（二）

三个小时学完vue3（二） 图片轮播案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2025/9/7 10:12:45

筑牢安全防线：工商业场所燃气泄漏防护新方案

燃气安全是企业经营不可逾越的生命线。在餐饮后厨、化工车间、酒店锅炉房等场所，可燃气体一旦泄漏，极易引发严重事故。如何实现精准监测、快速响应，成为工业及商业领域安全管理的核心诉求。旭华智能深耕安全监测领域，推出的工业及…...

编程日记 2025/9/6 14:15:45

git上传仓库操作

在 Visual Studio Code (VSCode) 中，手动将本地仓库与远程仓库关联起来是一个常见的需求。以下是详细的操作步骤和解释： 前提条件已安装 Git：确保你的系统中已经安装了 Git，并且可以通过命令行运行 git 命令。已初始化本地仓库&…...

编程日记 2025/9/9 6:46:14

广义线性模型下的数据分析（R语言）

一、实验目的： 通过上机试验，掌握利用R实现线性回归分析、逻辑回归、列联分析及方差分析，并能对分析结果进行解读。数据： 链接: https://pan.baidu.com/s/1JqZ_KbZJEk-pqSUWKwOFEw 提取码: hxts 二、实验内容： 1、2…...

编程日记 2025/9/11 20:55:27

贪心算法精品题

1.找钱问题本题的贪心策略在于我们希望就可能的保留作用大的5元 class Solution { public:bool lemonadeChange(vector<int>& bills) {std::map<int ,int> _map;for(auto ch:bills){if(ch 5) _map[ch];else if(ch 10){if(_map[5] 0) return false;else{_m…...

编程日记 2025/9/12 21:09:12

爱普生汽车用显示控制器IC：ScalerIC,汽车接口IC,相机接口IC

爱普生汽车显示控制器IC，汽车显示控制器芯片可以分为三类：爱普生显示控制芯片Scaler IC ，爱普生汽车接口IC，爱普生相机接口IC。下面就给大家分别介绍下这三类芯片的具体型号的特征及用途。爱普生显示控制芯片 Scaler IC Scaler…...

编程日记 2025/9/7 6:32:37

深度学习基础--ResNet50V2网络的讲解，ResNet50V2的复现(pytorch)以及用复现的ResNet50做鸟类图像分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊前言如果说最经典的神经网络，ResNet肯定是一个，从ResNet发布后，作者又进行修改，命名为ResNe50v2&#xff0c…...

编程日记 2025/9/11 6:40:05

物理竞赛中的线性代数

线性代数 1 行列式 1.1 n n n 阶行列式定义 1.1.1：称以下的式子为一个 n n n 阶行列式： ∣ A ∣ ∣ a 11 a 12 ⋯ a 1 n a 21 a 22 ⋯ a 2 n ⋮ ⋮ ⋱ ⋮ a n 1 a n 2 ⋯ a n n ∣ \begin{vmatrix}\mathbf A\end{vmatrix} \begin{vmatrix} a_{11…...

编程日记 2025/9/12 0:29:44

OptiTrack光学跟踪系统：引领工厂机器人应用的革新浪潮

在现代化的工厂生产线上，一台机械臂正以惊人的毫米级精度执行着精密零件的装配任务。这一精准操作的背后，是OptiTrack光学跟踪系统的实时捕捉与优化，它正助力生产效率与产品质量迈向新的高度。如今，这一技术正在全球范围内广泛应用…...

编程日记 2025/9/9 17:10:09

Coze/Dify/Ollama在玩ai时候的用途

Coze、Dify 和 Ollama 是三种不同的工具或平台，它们各自有不同的定位和用途。以下是对它们的区别、优缺点以及部署和使用方式的详细分析。 1. Coze 简介 Coze 是一个专注于构建基于大语言模型（LLM）的应用程序的开发平台。它类似于 Dify&…...

编程日记 2025/9/10 18:42:25

使用Docker Compose部署 MySQL8

MySQL 8 是一个功能强大的关系型数据库管理系统，而 Docker 则是一个流行的容器化平台。结合使用它们可以极大地简化 MySQL 8 的部署过程，并且确保开发环境和生产环境的一致性。安装 Docker 和 Docker Compose 首先，确保你的机器上已经安装了 Docker 和 Docker Compose。 …...

编程日记 2025/9/7 10:58:23

Golang快速上手02/Golang基础

4.控制语句 4.1条件控制语句 4.1.1if-elseif-else 与clang不同，if不需要加() if <condition1> {<block1> } else if <condition2> {<block2> } else {<block0> }示例 a : 10 if a > 5 {fmt.Println("a > 5") } els…...

编程日记 2025/9/4 19:26:09

Nginx处理http的流程

文章目录前言一、发版本后旧版本可以用项目基本情况Nginx 配置**解释每一行的作用：****表现和行为：****适用场景**：资源的缓存策略在这里插入图片描述二， nginx处理http的流程Nginx 的 GitHub 源码地址 **Nginx 核心源码解读&a…...

编程日记 2025/9/12 5:26:31

算法之刷题汇总

剑指 Offer 剑指 Offer 题解 | CS-Notes 面试笔记 Leetcode Leetcode 题解 | CS-Notes 面试笔记 GitCode - 全球开发者的开源社区,开源代码托管平台...

编程日记 2025/8/26 12:21:32

【AIGC系列】4：Stable Diffusion应用实践和代码分析

AIGC系列博文： 【AIGC系列】1：自编码器（AutoEncoder, AE） 【AIGC系列】2：DALLE 2模型介绍（内含扩散模型介绍） 【AIGC系列】3：Stable Diffusion模型原理介绍【AIGC系列】4&#xff1…...

编程日记 2025/9/9 22:33:50

【Python爬虫(81)】当量子计算邂逅Python爬虫：一场技术变革的预演

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2025/9/7 15:32:18

Java Web应用中获取客户端的真实IP地址

Java Web应用中获取客户端的真实IP地址，尤其在存在代理服务器的情况下。代码示例： public static String getClientIP(HttpServletRequest request) {String ip = parseCommaSeparatedIPs(request.getHeader("X-Forwarded-For"));if (isInvalid(ip)) {ip = pars…...

编程日记 2025/9/11 20:55:28

R语言+AI提示词：贝叶斯广义线性混合效应模型GLMM生物学Meta分析

全文链接：https://tecdat.cn/?p40797 本文旨在帮助0基础或只有简单编程基础的研究学者，通过 AI 的提示词工程，使用 R 语言完成元分析，包括数据处理、模型构建、评估以及结果解读等步骤（点击文末“阅读原文”获取完整代…...

编程日记 2025/9/7 11:01:50

LangChain原理解析及开发实战指南（2025年最新版）

一、LangChain核心架构解析 1.1 框架设计理念 LangChain是基于提示工程(Prompt Engineering)构建的LLM应用开发框架，其核心思想是通过模块化组件实现大语言模型与业务系统的无缝对接。该框架采用分层设计： 接口层：统一对接OpenAI、DeepSee…...

编程日记 2025/9/7 19:47:24

赋能农业数字化转型雏森科技助力“聚农拼”平台建设

赋能农业数字化转型，雏森科技助力“聚农拼”平台建设在数字化浪潮席卷各行业的今天，农业领域也在积极探索转型升级之路。中农集团一直以“根植大地，服务三农”为核心，以“乡村振兴，农民增收”为目标，及时…...

编程日记 2025/9/8 13:44:52

CMU15445(2023fall) Project #2 - Extendible Hash Index 匠心分析

胡未灭，鬓已秋，泪空流此生谁料心在天山身老沧州 ——诉衷情完整代码见： SnowLegend-star/CMU15445-2023fall: Having Conquered the Loftiest Peak, We Stand But a Step Away from Victory in This Stage. With unwavering determinati…...

编程日记 2025/9/7 19:43:32

深度剖析Seata源码：解锁分布式事务处理的核心逻辑

文章目录写在文章开头如何使用源码(配置转掉)基于AT模式详解Seata全链路流程Seata服务端启动本地服务如何基于GlobalTransaction注解开启事务客户端如何开启分布式事务RM和TC如何协调处理分支事务RM生成回滚日志事务全局提交与回滚小结参考写在文章开头在当今分布式系统日益…...

编程日记 2025/9/9 0:33:45

python配置mmcv与mmdet环境

首先查看自己的cuda版本 nvcc --version 安装与cuda对应的torch版本，对应关系 Previous PyTorch Versions | PyTorch 安装对应的mmcv版本，使用下面命令可以自动安装匹配的版本，使用mim安装 mim install mmcv-full -f https://download.o…...

编程日记 2025/9/8 4:39:59

ESP 32控制无刷电机2

import machine import time import socket import network from machine import I2C, Pin, ADC def start_ap(): """ 启动ESP32的AP模式 """ ap network.WLAN(network.AP_IF) ap.active(True) ssid ESP32_APTest …...

编程日记 2025/9/12 9:22:23

【uniapp原生】实时记录接口请求延迟，并生成写入文件到安卓设备

在开发实时数据监控应用时，记录接口请求的延迟对于性能分析和用户体验优化至关重要。本文将基于 UniApp 框架，介绍如何实现一个实时记录接口请求延迟的功能，并深入解析相关代码的实现细节。前期准备&必要的理解 1. 功能概述该功能的…...

编程日记 2025/8/29 5:04:23

wps角标快速生成

使用^#符号匹配数字，将[^#]内容找到，随后在格式-字体中选择上标，逐个/批量替换即可（比一点点改效率翻倍）...

编程日记 2025/9/4 18:12:04

Azure Speech

1、文字转语音(Text-To-Speech, TTS) 2、语音转文字(Speech-To-Text): Azure Speech to Text 1- 环境配置：Microsoft Azure 注册使用免费服务： 需要信用卡，本人没有，所以没有完成注册...

编程日记 2025/8/26 12:33:01

SHELL32!ILCombine函数分析之连接两个idl

SHELL32!ILCombine函数分析之连接两个idl 第一部分： STDAPI_(LPITEMIDLIST) ILCombine(LPCITEMIDLIST pidl1, LPCITEMIDLIST pidl2) { // Let me pass in NULL pointers if (!pidl1) { if (!pidl2) { return NULL; …...

编程日记 2025/9/11 5:57:57

学习threejs，使用ShaderMaterial自定义着色器材质

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.ShaderMaterial1.1.1…...

编程日记 2025/9/9 12:56:38