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

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

news 2025/6/20 0:50:49

文章目录

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/6/19 11:24:56

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/6/19 11:42:23

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/6/17 15:52:48

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/6/16 20:36:05

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/6/18 4:42:56

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/6/19 16:21:36

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/6/15 3:06:17

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/6/15 17:10:12

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/15 15:37:01