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

一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建

news 2026/4/11 7:45:33

文章目录

  • 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
  • 1. 先回忆webpack是个啥
  • 2. webpack四大核心
    • 2.1 Entry(入口)
    • 2.2 Output(输出)
    • 2.3 Loader(加载器)
    • 2.4 Plugin(插件)
  • 3. 按部就班实现webpack
    • 3.1 初始化项目
    • 3.2 完成项目骨架搭建
    • 3.3 实现webpack构建

一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建

1. 先回忆webpack是个啥

  • 直接看这篇文章
  • 一文大白话讲清楚啥是个webpack

2. webpack四大核心

2.1 Entry(入口)

  • 我们知道webpack需要根据一个或者多个入口文件来分析和构建模块依赖关系树，然后通过入口配置找出所有的依赖模块进行打包
  • 我们可以配置一个入口，也可以配置多个入口

2.2 Output(输出)

  • Webpack根据依赖关系将模块打包好，形成一个或者多个打包文件。我们就是通过Output来配置输出的文件路径、文件名称和格式等

2.3 Loader(加载器)

  • 我们上面的文章 讲过，Webpack本身只能处理js模块，如果要处理其他类型的文件模块，比如VUE文件，IMAGE文件等，就需要Loader加载器
  • 通过配置不同的Loader我们几乎可以将任何类型的文件当成模块进行打包，Loader的主要作用就是在模块加载时对其进行转换和处理。

2.4 Plugin(插件)

  • 插件应该很好理解，Webpack可以通过Plugin配置不同的插件来扩展自身的功能，我们一般在webpack中引入并实例化plugin，然后加入pluginA数组中

3. 按部就班实现webpack

3.1 初始化项目

  • 我们新建一个webpackTest文件夹（在此之前需要配置Node环境和npm等，这个这里不详细讲，默认node环境已OK），然后用vscode或者webstorm打开，也可以用其他开发工具，只要便于使用终端命令就行

  • 我们这里使用vscode来做演示
    在这里插入图片描述

  • 我们先来初始化项目，输入npm init

  • 初始完毕后安装输入npm install webpack webpack-cli来webpack和webpack-cli
    在这里插入图片描述

  • 初始化完毕后，我们看一下目前的项目结构分为三部分，node_modules模块目录、package.json和package-lock.json三个文件
    在这里插入图片描述

  • 现在项目初始化完成了，开始我们的业务编码

3.2 完成项目骨架搭建

  • 我们在根目录下新建一个src目录，用来存放我们的源代码，并在src目录下创建一个main.js作为Entry的入口文件。

  • 然后在根目录下创建一个public，用来存放我们的index.html文件

  • 然后我们在src目录下再创建一个modulejs文件夹，用来存放我们的js模块，并在modulejs下面创建add.js
    在这里插入图片描述

  • 我们先来写index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf8"><title>webpackTest</title>
</head>
<body><div id="app"></div>
</body>
</html>
  • 然后写add.js
let add= (x,y)=>x+y;
export {add}
  • 然后写main.js，里面引入add.js，两个形成依赖关系
import {add} from './modulejs/add'
console.log(add(2,3))
  • 写好index.html,main.js，add.js之后，我们开始配置webpack四大核心，Entry，Output,loader和Plugin
  • 由于我们目前只处理js文件，所以webpack自身就可以处理，暂且不配置loader和plugin
  • 在根目录下新建webpack.config.js
const path=require('path')
module.exports={mode:'development',//开发模式entry:{//配置入口文件，根据入口文件建立依赖关系main:'./src/main.js'},output:{//配置出口文件，制定打包后的文件名称和路径path:path.resolve(__dirname,'dist'),//__dirname是node模块级别的全局对象，返回当前文件所在的路径，不包含文件名filename:'js/chunk-[contenthash].js'//[contenthash]表示由内容生成的唯一的hash},
}
  • 这时候我们已经完成项目的基本大家，需要通过webpack跑起来，为了方便，我们在package.json中配置webpack构建命令build:webpack
    在这里插入图片描述

3.3 实现webpack构建

  • 然后我们在终端输入
npm run build

  • 运行完以后，我们会发现项目根目录下多了一个dist文件夹，里面生成了一个js文件，这个就是最终打包好的js
    在这里插入图片描述

  • js生成了，但问题是没有index.html，我们没法去运行，所以我们要把index.html打包，并和打包后的js形成引用关系

  • 这时候Plugin就该上场了

  • 先安装html插件

npm install html-webpack-plugin
  • 我们在package.json里面引入HTML插件，并制定index.html为模板
/**/
const HtmlPlugin=require("html-webpack-plugin")
/**/
plugins:[//因为可以有很多plugin，所以是plugins数组new HtmlPlugin({template:'./public/index.html',//指定main.js被关联的模板文件filename:'index.html',//打包以后得名称inject:'body'//inject决定main.js被注入到index.html的什么位置，这里选择的事body中'body'和true都表示注入到body标签的底部})
]

  • 下图template误写成tepalte了，请复制上面的代码就行
    在这里插入图片描述

  • 然后我们重新在终端输入

npm run build

  • 打包后我们重新打开dist文件夹，会发先里面活了一个index.html.而且打包后的js文件被注入到了html文件body标签的底部
    在这里插入图片描述

  • 这时候我们运行dist下面的index.html，然后打开控制台，看看main.js里面的console是否执行了打印
    在这里插入图片描述

在这里插入图片描述

  • 到这里我们初步完成了webpack的整体构建

相关文章：

一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建

文章目录 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建1. 先回忆webpack是个啥2. webpack四大核心2.1 Entry(入口)2.2 Output(输出)2.3 Loader(加载器)2.4 Plugin(插件) 3. 按部就班实现webpack3.1 初始化项目3.2 完成项目骨架搭建3.3 实现webpack构建 一文…...

编程日记 2025/1/20 20:26:49

RabbitMQ基础篇

文章目录 1 RabbitMQ概述1.1 消息队列1.2 RabbitMQ体系结构 2 RabbitMQ工作模式2.1 简单模式&#xff08;Simple Queue&#xff09;2.2 工作队列模式&#xff08;Work Queues&#xff09;2.3 发布/订阅模式&#xff08;Publish/Subscribe&#xff09;2.4 路由模式&#xff08;R…...

编程日记 2025/1/20 20:18:41

GPT-5 传言：一场正在幕后发生的 AI 变革

新的一年&#xff0c;让我们从一个引人入胜的话题开始&#xff1a;如果我告诉你&#xff0c;GPT-5 并非虚构&#xff0c;而是真实存在呢&#xff1f;它不仅真实存在&#xff0c;而且正在你看不见的地方悄然塑造着世界。我的基本假设是&#xff1a;OpenAI 已经秘密开发出 GPT-5&…...

编程日记 2025/1/20 20:17:39

CSS布局与响应式

学习链接 Grid网格布局 前端五大主流网页布局 flex布局看这一篇就够了 grid布局看这一篇就够了 用六个案例学会响应式布局 伸缩盒响应式页面布局实战 实现响应式布局的五种方式 - csdn 如何完成响应式布局&#xff0c;有几种方法&#xff1f;看这个就够了 响应式布局总…...

编程日记 2025/1/20 20:14:35

C++的auto_ptr智能指针：从诞生到被弃用的历程

C作为一种功能强大的编程语言&#xff0c;为开发者提供了众多便捷的特性和工具&#xff0c;其中智能指针是其重要特性之一。智能指针能够自动管理内存&#xff0c;有效避免内存泄漏等常见问题。然而&#xff0c;并非所有智能指针都尽善尽美&#xff0c;auto_ptr便是其中的一个例…...

编程日记 2025/1/20 20:06:26

iOS - Objective-C 底层实现中的哈希表

1. 关联对象存储&#xff08;AssociationsHashMap&#xff09; // 关联对象的哈希表实现 typedef DenseMap<const void *, ObjcAssociation> ObjectAssociationMap; typedef DenseMap<DisguisedPtr<objc_object>, ObjectAssociationMap> AssociationsHashMa…...

编程日记 2025/1/20 20:02:15

什么是软件架构

什么是软件架构 程序员说&#xff0c;软件架构是要决定编写哪些C程序或OO类、使用哪些库和框架 程序经理说&#xff0c;软件架构就是模块的划分和接口的定义 系统分析员说&#xff0c;软件架构就是为业务领域对象的关系建模 配置管理员说&#xff0c;软件架构就是开发出来的…...

编程日记 2025/1/20 19:59:06

【Golang/nacos】nacos配置的增删查改，以及服务注册的golang实例及分析

前言 本文分析的实例来源于nacos在github上的开源仓库 nacos配置的增删查改 先具体来看一段代码&#xff0c;我将逐步分析每一段的作用 package mainimport ("fmt""time""github.com/nacos-group/nacos-sdk-go/clients""github.com/naco…...

编程日记 2025/1/20 19:51:52

RabbitMQ集群安装rabbitmq_delayed_message_exchange

1、单节点安装rabbitmq安装延迟队列 安装延迟队列rabbitmq_delayed_message_exchange可以参考这个文章&#xff1a; rabbitmq安装延迟队列-CSDN博客 2、集群安装rabbitmq_delayed_message_exchange 在第二个节点 join_cluster 之后&#xff0c;start_app 就会报错了 (CaseC…...

编程日记 2025/1/20 19:50:51

Linux UDP 编程详解

一、引言 在网络编程领域&#xff0c;UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;作为一种轻量级的传输层协议&#xff0c;具有独特的优势和适用场景。与 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff0…...

编程日记 2025/1/20 19:47:46

【2024年华为OD机试】(B卷,100分)- 计算最接近的数 （Java JS PythonC/C++）

一、问题描述 题目解析 我们需要找到一个下标 i&#xff0c;使得表达式 X[i] - X[i 1] - ... - X[i K - 1] 的结果最接近于数组的中位数。如果有多个 i 满足条件&#xff0c;则返回最大的 i。 关键点&#xff1a; 中位数计算&#xff1a; 将数组排序后&#xff0c;中位数…...

编程日记 2025/1/20 19:44:43

Pytorch 自学笔记（三）：利用自定义文本数据集构建Dataset和DataLoader

Pytorch 自学笔记&#xff08;三&#xff09; 1. Dataset与DataLoader1.1 torch.utils.data.Dataset1.2 torch.utils.data.DataLoader Pytorch 自学笔记系列的第三篇。针对Pytorch的Dataset和DataLoader进行简单的介绍&#xff0c;同时&#xff0c;介绍如何使用自定义文本数据集…...

编程日记 2025/1/20 19:41:40

QT 使用QSqlTableModel对数据库进行创建，插入，显示

文章目录 效果图概述功能点代码分析初始数据插入数据数据显示 总结 效果图 概述 本案例用于对数据库中的数据进行显示等其他操作&#xff0c;其他表格筛选&#xff0c;过滤等功能可看此博客 框架&#xff1a;数据模型使用QSqlTableModel&#xff0c;视图使用QTableView&#x…...

编程日记 2025/1/20 19:40:40

如何学习Transformer架构

Transformer架构自提出以来&#xff0c;在自然语言处理领域引发了革命性的变化。作为一种基于注意力机制的模型&#xff0c;Transformer解决了传统序列模型在并行化和长距离依赖方面的局限性。本文将探讨Transformer论文《Attention is All You Need》与Hugging Face Transform…...

编程日记 2025/1/20 19:38:36

浅谈云计算22 | Kubernetes容器编排引擎

Kubernetes容器编排引擎 一、Kubernetes管理对象1.1 Kubernetes组件和架构1.2 主要管理对象类型 二、Kubernetes 服务2.1 服务的作用与原理2.2 服务类型 三、Kubernetes网络管理3.1 网络模型与目标3.2 网络组件3.2.1 kube-proxy3.2.2 网络插件 3.3 网络通信流程 四、Kubernetes…...

编程日记 2025/1/20 19:34:32

计算 SAMOut V3 在将词汇表从1万 增加到6千万的情况下能够减少多少参数

当我们将词汇表从 60,000,000&#xff08;六千万&#xff09;减少到 10,000 时&#xff0c;实际上是在缩小模型的词嵌入层及其共享的语言模型头&#xff08;LM Head&#xff09;的规模。这将导致参数量显著减少。我们可以通过以下步骤来计算具体的参数减少量。 参数量减少计算…...

编程日记 2025/1/20 19:32:29

03.选择排序

一、题目思路 选择排序是一种简单直观的排序算法。它的工作原理是&#xff1a;首先在未排序序列中找到最小&#xff08;或最大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;或最大&#xff…...

编程日记 2025/1/20 19:28:25

02_登录窗口

新建场景 重命名为GameRoot 双击GameRoot进入新场景 同样摄像机清除格式 删除平行光并关闭渲染灯光的天空盒 新建空节点重命名为GameRoot GameRoot为游戏的根节点 在整个游戏中都不会被删除 在游戏的根节点下创建UI的根节点Canvas 创建一个空节点 作为UI根节点下的 登录场景UI…...

编程日记 2025/1/20 19:27:24

NodeJS | 搭建本地/公网服务器 live-server 的使用与安装

目录 介绍 安装 live-server 安装方法 安装后的验证 环境变量问题 Node.js 环境变量未配置正确 全局安装的 live-server 路径未添加到环境变量 运行测试 默认访问主界面 访问文件 报错信息与解决 问题一&#xff1a;未知命令 问题二&#xff1a;拒绝脚本 公网配置…...

编程日记 2025/1/20 19:26:19

SystemUI 实现音量条同步功能

需求&#xff1a;SystemUI 实现音量条同步功能 具体问题 以前在SystemUI 下拉框添加了音量条控制&#xff0c;目前发现在SystemUI下拉框显示状态的情况下&#xff0c; 按键或者底部虚拟导航点击音量加减时候&#xff0c;SystemUI音量条不更新。 如下图&#xff1a;两个Syste…...

编程日记 2025/1/20 19:25:17

Jupyter Notebook配置避坑指南：为什么改了路径还是报错？

Jupyter Notebook路径配置终极排障手册&#xff1a;从原理到实战 第一次打开Jupyter Notebook时&#xff0c;那个熟悉的C盘用户目录是否让你感到束手束脚&#xff1f;许多开发者都遇到过这样的困境&#xff1a;明明按照教程修改了配置文件&#xff0c;重启后却依然报错或路径未…...

编程新知 2026/4/11 7:44:43

深度解析 Chromium WebUI 的生命周期与 IsJavascriptAllowed 崩溃之谜

在 Chromium (或基于其二次开发的浏览器等内核) 开发中&#xff0c;WebUI 是我们最常打交道的模块之一。诸如 chrome://settings、chrome://history 这些内置页面&#xff0c;都是通过 WebUI 机制实现前端 (HTML/JS) 与底层 C 的双向通信。然而&#xff0c;在处理后台异步任务向…...

编程新知 2026/4/11 7:42:43

保姆级教程：用Qwen3-VL-8B搭建本地视觉问答工具，4090显卡轻松跑

保姆级教程&#xff1a;用Qwen3-VL-8B搭建本地视觉问答工具&#xff0c;4090显卡轻松跑 1. 为什么选择Qwen3-VL-8B&#xff1f; 想象一下&#xff0c;你正在开发一个智能相册应用&#xff0c;用户上传一张照片后&#xff0c;系统能自动回答"照片里有哪些人&#xff1f;&…...

编程新知 2026/4/11 5:49:57

Cursor Skills 实战：从概念到生产级前端界面的一站式指南

1. 为什么你需要掌握Cursor Skills&#xff1f; 第一次听说Cursor Skills时&#xff0c;我也觉得这不过是又一个AI噱头。直到在真实项目中用它重构了一个电商登录页面&#xff0c;开发时间从3天缩短到3小时&#xff0c;我才意识到这可能是前端开发的一次革命性工具。 简单来说…...

编程新知 2026/4/11 5:45:56

深入解析Nginx三大高危漏洞：从原理到实战防御

1. Nginx解析漏洞&#xff1a;当图片马遇上错误配置 你可能不知道&#xff0c;一张普通的JPG图片在特定条件下能变成执行任意代码的"木马"。这不是魔术&#xff0c;而是Nginx历史上臭名昭著的解析漏洞。我在实际渗透测试中&#xff0c;曾用这个漏洞在5分钟内拿下一台…...

编程新知 2026/4/11 2:47:55

[Refactor]CPP Learn Data Day 信

一、什么是urllib3&#xff1f; urllib3 是一个用于处理 HTTP 请求和连接池的强大、用户友好的 Python 库。 它可以帮助你&#xff1a; 发送各种 HTTP 请求&#xff08;GET, POST, PUT, DELETE等&#xff09;。 管理连接池&#xff0c;提高网络请求效率。 处理重试和重定向。 支…...

编程新知 2026/4/11 2:18:06

Proteus仿真必备：MPU6050模型下载与使用全攻略（含componentsearchengine.com注册技巧）

Proteus仿真进阶&#xff1a;MPU6050模型深度应用与实战技巧 在嵌入式系统开发中&#xff0c;仿真环节往往能节省大量硬件调试时间。Proteus作为业界广泛使用的电路仿真软件&#xff0c;其模型库的丰富程度直接决定了仿真效率。MPU6050这款集成了三轴陀螺仪和三轴加速度计的传感…...

编程新知 2026/4/11 0:51:26

从认证到实现：功能安全与Class B在工业驱动中的核心实践

1. 工业驱动设备为什么需要功能安全认证 第一次接触功能安全认证时&#xff0c;我也觉得这不过是又一张"纸面证书"。直到亲眼见过电机失控把金属板材甩出十几米远&#xff0c;才真正理解为什么变频器和伺服驱动器必须通过功能安全认证。现在随便打开一台主流品牌的工…...

编程新知 2026/4/10 20:59:43

小程序在企业数字化转型中的作用是什么？

小程序在企业数字化转型中的作用是什么&#xff1f;一、核心结论小程序在企业数字化转型中的核心作用&#xff0c;不是简单的“线上工具”&#xff0c;而是连接用户、业务与数据的轻量化入口。它通过降低使用门槛与缩短业务路径&#xff0c;使企业能够更高效地完成获客、转化与…...

编程新知 2026/4/10 20:49:12

从零开始：在CentOS 7上使用Docker快速搭建OpenVAS漏洞扫描环境（附详细配置步骤）

从零构建企业级漏洞扫描平台&#xff1a;CentOS 7DockerOpenVAS全实战指南 在网络安全日益重要的今天&#xff0c;漏洞扫描已成为企业IT基础设施的标配防护手段。OpenVAS作为开源的漏洞评估系统&#xff0c;凭借其全面的漏洞检测能力和持续更新的漏洞数据库&#xff0c;成为众多…...

编程新知 2026/4/10 20:45:11