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

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

news 2025/9/20 2:28:08

文章目录

  • 一文大白话讲清楚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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/9/16 18:47:23

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/17 9:50:31

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/8/16 21:50:27

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/9/18 12:54:41

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/9/14 12:35:09

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/9/5 19:39:35

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/9/20 0:10:03

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/9/17 3:15:13

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51