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

webpack【初体验】使用 webpack 打包一个程序

news 2026/2/9 12:56:20

打包前

共 3 个文件

在这里插入图片描述

dist\index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Webpack 示例</title>
</head><body><h1>Webpack 示例</h1><!-- 引入打包后的 JavaScript 文件 --><script src="bundle.js"></script>
</body></html>

src\hello.js

export function hello() {alert("你好");
}

src\index.js

import { hello } from "./hello";
hello();

使用 Webpack 打包

新建文件 package.json

{"name": "webpack_demo","version": "1.0.0","main": "index.js","scripts": {"build": "webpack --config webpack.config.js"},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"webpack": "^5.97.1","webpack-cli": "^6.0.1"}
}

新建文件 webpack.config.js

const path = require("path");module.exports = {// 入口文件entry: "./src/index.js",// 输出配置output: {filename: "bundle.js",path: path.resolve(__dirname, "dist"),},
};

安装依赖

pnpm i

开始打包

在这里插入图片描述

打包后

将 hello.js 和 index.js 合并成了一个文件 dist\bundle.js

(()=>{"use strict";alert("你好")})();

最终效果为
在这里插入图片描述

浏览器访问 dist\index.html 可见程序正常运行，表示打包成功！

在这里插入图片描述

总结 Webpack 的打包过程

Webpack 通过 webpack.config.js 中的 entry 配置，找到打包的入口文件 src/index.js
沿着入口文件 src/index.js，找到导入的关联文件 src\hello.js
根据 webpack.config.js 中的 output 配置，Webpack 会将所有找到的文件（ hello.js 和 index.js ）打包成一个名为 bundle.js 的文件，并输出到 dist 文件夹中

dist\index.html 则直接加载的打包后的 bundle.js 文件，实现预期效果

    <!-- 引入打包后的 JavaScript 文件 --><script src="bundle.js"></script>

webpack【初体验】使用 webpack 打包一个程序

打包前共 3 个文件 dist\index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Webpack 示例&…...

编程日记 2025/2/10 16:21:54

＜论文＞DeepSeek-R1：通过强化学习激励大语言模型的推理能力（深度思考）

一、摘要本文跟大家来一起阅读DeepSeek团队发表于2025年1月的一篇论文《DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning | Papers With Code》，新鲜的DeepSeek-R1推理模型，作者规模属实庞大。如果你正在使用Deep…...

编程日记 2025/2/10 16:20:53

公司配置内网穿透方法笔记

一、目的公司内部有局域网，局域网上有ftp服务器，有windows桌面服务器； 在内网环境下，是可以访问ftp服务器以及用远程桌面登录windows桌面服务器的； 现在想居家办公时，也能访问到公司内网的ftp服务器和win…...

编程日记 2025/2/10 16:07:40

1，使用flask框架搭建一个简易网站后端代码app.py from flask import Flask, render_template, request, redirect, url_for, sessionapp Flask(__name__) app.secret_key 123456789 # 用于加密会话数据# 模拟用户数据库 users {user1: {password: password1}…...

编程日记 2025/2/10 16:05:38

人工智能浪潮下脑力劳动的变革与重塑：挑战、机遇与应对策略

一、引言 1.1 研究背景与意义近年来，人工智能技术发展迅猛，已成为全球科技领域的焦点。从图像识别、语音识别到自然语言处理，从智能家居、智能交通到智能医疗，人工智能技术的应用几乎涵盖了我们生活的方方面面，给人…...

编程日记 2025/2/10 16:02:35

ESP32-S3驱动步进电机以及梯形加减速库调用

一、硬件连接说明电机与驱动器连接： 42BYGH39-401A步进电机有4根引线，分别连接到驱动器（如TB6600）的电机接口上。电机引脚A、A-、B、B-分别连接到驱动器对应的电机接口。驱动器与ESP32-S3连接： ESP32-S3的GPIO引脚…...

编程日记 2025/2/10 16:00:31

【CubeMX+STM32】SD卡文件系统读写 FatFs+SDIO+DMA

本篇，将使用CubeMXKeil，创建一个SD卡的 FatFSSDIODMA 文件系统读写工程。目录一、简述二、CubeMX 配置 FatFSSDIO DMA 三、Keil 编辑代码四、实验效果实现效果，如下图： 一、简述上两篇，已循序渐进讲解了SD、…...

编程日记 2025/2/10 15:58:29

Kotlin 2.1.0 入门教程（十）if、when

if 表达式 if 是一个表达式，它会返回一个值。不存在三元运算符（condition ? then : else），因为 if 在这种场景下完全可以胜任。 var max aif (a < b) max bif (a > b) {max a } else {max b }max if (a > b) a…...

编程日记 2025/2/10 15:54:24

AJAX项目——数据管理平台

黑马程序员视频地址： 黑马程序员——数据管理平台前言功能： 1.登录和权限判断 2.查看文章内容列表（筛选，分页） 3.编辑文章（数据回显） 4.删除文章 5.发布文章（图片上传&#xff0…...

编程日记 2025/2/10 15:53:21

华为云搭建微信小程序商城后台

目录安装宝塔界面配置运行环境 1. 修改默认用户名密码 2. 修改默认端口号 3. 安装依赖软件 4. 安装商城配置商城 1. 点击下一步进行商城环境检测 2. 将安装ShopXO成功后的弹窗信息填写到配置界面 3. 点击安装发布小程序源代码地址 1. 下载HBuilderX 2. 导入插…...

编程日记 2025/2/10 15:52:20

5、大模型的记忆与缓存

文章目录本节内容介绍记忆Mem0使用 mem0 实现长期记忆缓存LangChain 中的缓存语义缓存本节内容介绍本节主要介绍大模型的缓存思路，通过使用常见的缓存技术，降低大模型的回复速度，下面介绍的是使用redis和mem0，当然redis的语义…...

编程日记 2025/2/10 15:51:18

Windows下AMD显卡在本地运行大语言模型(deepseek-r1)

Windows下AMD显卡在本地运行大语言模型本人电脑配置第一步先在官网确认自己的 AMD 显卡是否支持 ROCm下载Ollama安装程序模型下载位置更改下载 ROCmLibs先确认自己显卡的gfx型号下载解压替换替换rocblas.dll替换library文件夹下的所有重启Ollama下载模型运行效果本人电脑配…...

编程日记 2025/2/10 15:47:14

代码随想录day09

151.反转字符串中的单词，需二刷 //先去除多余空格，再反转所有字符，再反转单词，即可反转字符串中的单词 void removeWhiteSpace(string& s){int slowIndex 0;for(int fastIndex 0; fastIndex < s.size(); fastIndex){if(…...

编程日记 2025/2/10 15:43:09

Racecar Gym 总结

1.Racecar Gym 简介 Racecar Gym 是一个基于 PyBullet 物理引擎的自动驾驶仿真平台，提供 Gymnasium（OpenAI Gym） 接口，主要用于强化学习（Reinforcement Learning, RL）、多智能体竞速（Multi-Ag…...

编程日记 2025/2/10 15:42:08

【C++高并发服务器WebServer】-15：poll、epoll详解及实现

本文目录一、poll二、epoll2.1 相对poll和select的优点2.2 epoll的api2.3 epoll的demo实现2.5 epoll的工作模式一、poll poll是对select的一个改进，我们先来看看select的缺点。我们来看看poll的实现。 struct pollfd {int fd; /* 委托内核检测的文件描述符 */s…...

编程日记 2025/2/10 15:41:06

Visual Studio 2022 中使用 Google Test

要在 Visual Studio 2022 中使用 Google Test (gtest)，可以按照以下步骤进行： 安装 Google Test：确保你已经安装了 Google Test。如果没有安装，可以通过 Visual Studio Installer 安装。在安装程序中，找到并选择 Googl…...

编程日记 2025/2/10 15:38:02

Office/WPS接入DeepSeek等多个AI工具，开启办公新模式！

在现代职场中，Office办公套件已成为工作和学习的必备工具，其功能强大但复杂，熟练掌握需要系统的学习。为了简化操作，使每个人都能轻松使用各种功能，市场上涌现出各类办公插件。这些插件不仅提升了用户体验，…...

编程日记 2025/2/10 15:36:00

Meta AI 最近推出了一款全新的机器学习框架ParetoQ，专门用于大型语言模型的4-bit 以下量化

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/2/10 15:33:58

操作系统—进程与线程

补充知识 PSW程序状态字寄存器PC程序计数器：存放下一条指令的地址IR指令寄存器：存放当前正在执行的指令通用寄存器：存放其他一些必要信息进程进程：进程是进程实体的运行过程，是系统进行资源分配和调度的一个独立单位…...

编程日记 2025/2/10 15:32:51

团队：前端开发工期参考 / 防止工期不足、过足、工期打架

一、前端开发工期参考序号功能 / 模块 / 页面 / 描述pc端（数值为比例）小程序端（数值为比例）1简单页面 / 常规页面1：12复杂页面（功能复杂 / 逻辑复杂）1：1.5 / 1：2 / …...

编程日记 2025/2/10 15:30:49

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...

编程新知 2026/2/8 4:37:15

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪宝可梦GO游戏自组网系统

目录游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法安全性设计技术选…...

编程新知 2025/12/12 6:01:17

AspectJ 在 Android 中的完整使用指南

一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Android第十三次面试总结（四大组件基础）

Activity生命周期和四大启动模式详解一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...

编程新知 2025/10/15 15:07:34

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...

编程新知 2025/11/2 1:48:43

深入解析 ReentrantLock：原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类，用于实现线程同步，支持可重入性，并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理基本架构 ReentrantLo…...

编程新知 2025/10/12 23:48:51

解密鸿蒙系统的隐私护城河：从权限动态管控到生物数据加密的全链路防护

摘要本文以健康管理应用为例，展示鸿蒙系统如何通过细粒度权限控制、动态权限授予、数据隔离和加密存储四大核心机制，实现复杂场景下的用户隐私保护。我们将通过完整的权限请求流程和敏感数据处理代码，演示鸿蒙系统如何平衡功能需求与隐私安…...

编程新知 2026/1/28 8:29:41

打包前

dist\index.html

src\hello.js

src\index.js

使用 Webpack 打包

新建文件 package.json

新建文件 webpack.config.js

安装依赖

开始打包

打包后

总结 Webpack 的打包过程

相关文章：