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

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

news 2025/11/14 19:12:50

文章目录

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/11/12 18:29:36

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/11/13 13:32:05

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/11/10 18:11:24

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45