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

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

news 2026/5/27 23:14:25

打包前

共 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 的打包过程

  1. Webpack 通过 webpack.config.js 中的 entry 配置，找到打包的入口文件 src/index.js

  2. 沿着入口文件 src/index.js，找到导入的关联文件 src\hello.js

  3. 根据 webpack.config.js 中的 output 配置，Webpack 会将所有找到的文件 （ hello.js 和 index.js ）打包成一个名为 bundle.js 的文件，并输出到 dist 文件夹中

  4. 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》&#xff0c;新鲜的DeepSeek-R1推理模型&#xff0c;作者规模属实庞大。如果你正在使用Deep…...

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

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

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

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

python爬虫--简单登录

1&#xff0c;使用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 研究背景与意义 近年来&#xff0c;人工智能技术发展迅猛&#xff0c;已成为全球科技领域的焦点。从图像识别、语音识别到自然语言处理&#xff0c;从智能家居、智能交通到智能医疗&#xff0c;人工智能技术的应用几乎涵盖了我们生活的方方面面&#xff0c;给人…...

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

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

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

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

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

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

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

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

if 表达式 if 是一个表达式&#xff0c;它会返回一个值。 不存在三元运算符&#xff08;condition ? then : else&#xff09;&#xff0c;因为 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项目——数据管理平台

黑马程序员视频地址&#xff1a; 黑马程序员——数据管理平台 前言 功能&#xff1a; 1.登录和权限判断 2.查看文章内容列表&#xff08;筛选&#xff0c;分页&#xff09; 3.编辑文章&#xff08;数据回显&#xff09; 4.删除文章 5.发布文章&#xff08;图片上传&#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 中的缓存语义缓存 本节内容介绍 本节主要介绍大模型的缓存思路&#xff0c;通过使用常见的缓存技术&#xff0c;降低大模型的回复速度&#xff0c;下面介绍的是使用redis和mem0&#xff0c;当然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.反转字符串中的单词&#xff0c;需二刷 //先去除多余空格&#xff0c;再反转所有字符&#xff0c;再反转单词&#xff0c;即可反转字符串中的单词 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 物理引擎 的自动驾驶仿真平台&#xff0c;提供 Gymnasium&#xff08;OpenAI Gym&#xff09; 接口&#xff0c;主要用于强化学习&#xff08;Reinforcement Learning, RL&#xff09;、多智能体竞速&#xff08;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的一个改进&#xff0c;我们先来看看select的缺点。 我们来看看poll的实现。 struct pollfd {int fd; /* 委托内核检测的文件描述符 */s…...

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

Visual Studio 2022 中使用 Google Test

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

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

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

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

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

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

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

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

操作系统—进程与线程

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

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

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

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

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

CentOS 7下‘Development Tools’和‘开发工具’组有区别吗？实测告诉你答案

CentOS 7下‘Development Tools’与‘开发工具’的隐藏关联&#xff1a;技术细节全解析在Linux系统管理中&#xff0c;yum的软件包组功能一直是个既实用又充满谜团的领域。特别是当系统语言环境与软件包元数据语言不一致时&#xff0c;开发者们常常会遇到一个有趣的现象&#x…...

编程新知 2026/5/26 3:38:09

Claude Code 之父：2026 年我一行代码都没写，编程已被 AI 解决

2026 年&#xff0c;你还在一行一行敲代码吗&#xff1f;Claude Code 的创造者、Anthropic 核心人物 Boris Cherny&#xff0c;在公开访谈里抛出一句让整个行业震动的话&#xff1a;2026 年到现在&#xff0c;我没有写过一行代码。所有开发工作&#xff0c;100% 交给 AI 代理完…...

编程新知 2026/5/26 3:30:08

PA100K数据集实战：从下载到结构化解析全流程

1. PA100K数据集初探&#xff1a;为什么选择它&#xff1f;如果你正在研究行人属性识别&#xff0c;PA100K绝对是个绕不开的宝藏数据集。这个数据集包含了10万张真实监控场景下的行人图像&#xff0c;每张图都标注了26种常见属性——从衣着风格&#xff08;比如是否穿T恤、裙子…...

编程新知 2026/5/26 3:15:58

浅聊26上半年软考架构师

2026年上半年架构师考试已然落幕&#xff0c;大家都考的如何&#xff1f;架构师共有三门考试&#xff0c;上午综合知识&#xff08;75道选择题&#xff09;案例分析&#xff0c;时间为8.30-12.30&#xff1b;下午论文&#xff0c;时间为14.30-16.30。下面说说我整体的备考过程。…...

编程新知 2026/5/26 2:49:46

手把手教你为WCH CH582移植CherryUSB主机栈（基于RT-Thread，含中断优化）

基于RT-Thread的WCH CH582 USB主机协议栈深度移植指南在嵌入式开发领域&#xff0c;USB主机功能的实现往往意味着设备能够直接连接各类USB外设&#xff0c;从简单的键盘鼠标到复杂的存储设备。对于使用WCH CH582这类RISC-V内核MCU的开发者而言&#xff0c;原厂SDK提供的USB主机…...

编程新知 2026/5/26 2:17:28

物联网与云技术赋能咖啡后处理：CeriTech 的实时监控系统实践

1. 项目概述&#xff1a;用物联网与云技术重塑咖啡后处理在印尼的咖啡农场里&#xff0c;传统的发酵与干燥过程很大程度上依赖“感觉”和“经验”。一位有经验的农人可能会用手触摸、用鼻子闻&#xff0c;或者根据天气和日照时间来估算发酵是否完成、干燥是否均匀。这种方法固然…...

编程新知 2026/5/26 1:51:13

ARMv8 HFGITR_EL2寄存器解析与虚拟化指令陷阱控制

1. AArch64 HFGITR_EL2寄存器架构解析HFGITR_EL2&#xff08;Hypervisor Fine-Grained Instruction Trap Register&#xff09;是ARMv8架构中专门用于指令级陷阱控制的系统寄存器&#xff0c;属于虚拟化扩展的重要组成部分。这个64位寄存器通过位映射机制实现对特定AArch64指令…...

编程新知 2026/5/26 1:47:12

政企数据安全：危机与出路

随着数字化转型的浪潮席卷全球&#xff0c;公共部门积累的数据量呈爆炸式增长。从公民个人信息到公共服务记录&#xff0c;从财政预算到基础设施管理数据——这些宝贵资源在提升政府治理效率的同时&#xff0c;也悄然成为网络犯罪分子的“新猎物”。当公共数据逐渐成为数字时代…...

编程新知 2026/5/26 1:39:10

销售怎么通过各种方法获取电话号码

第一种就是那个用爬虫电话号码&#xff0c;然后再打电话给客户。第二种是在别人的挪车电话看车挪车电话&#xff0c;然后再打电话找客户。第三就是。扫楼一顿顿的扫&#xff0c;第四就是这个那种商店&#xff0c;一个个的去问陌拜地推一个个的问店子要不要贷款&#xff0c;去问…...

编程新知 2026/5/26 1:13:04

Windows文件夹共享

目标&#xff1a;同一局域网实现在一台计算机上共享文件夹&#xff0c;在另一台电脑访问一、电脑A 1.点击要共享的文件夹 -> 属性 -> 共享2.添加Everyone用户组3.控制面板中网络共享关闭密码保存&#xff0c;在访问时不用输入账号密码。二、电脑B 1.在文件资源管理器路径…...

编程新知 2026/5/25 23:39:42