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

第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo

news 2025/12/26 11:14:57

目录

  • 一、创建webpack工程
    • 1.1 新建 webpack工程目录
    • 1.2 项目初始化
    • 1.3 新建src目录和文件
    • 1.4 安装jQuery
    • 1.5 安装webpack
    • 1.6 配置webpack
      • 1.6.1 创建配置文件：webpack.config.js
      • 1.6.2 配置dev脚本
      • 1.7 运行dev脚本
    • 1.8 查看效果
    • 1.9 附件
      • 1.9.1 package.json
      • 1.9.2 webpack.config.js
      • 1.9.3 index.js
      • 1.9.4 index.html
  • 二、webpack打包默认值
    • 2.1 默认值
    • 2.2 修改默认值

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图( dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

纸上得来终觉浅，绝知此事要躬行。此次目标是：创建一个简单的webpack工程demo，来理解webpack的运行机制。最终的工程目录结构如下所示：
在这里插入图片描述

一、创建webpack工程

1.1 新建 webpack工程目录

  • 新建一个 webpack 文件夹

  • 打开该文件夹的cmd: 选中文件夹目录，输入cmd
    在这里插入图片描述

1.2 项目初始化

  • 在打开的cmd窗口中，执行命令 npm init -y，此时会在webpack 目录下生成文件package.json
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm init -y
Wrote to D:\A_MyWork\M05.MYCode\vscode\javascript\webpack\package.json:{"name": "webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.3 新建src目录和文件

  • 在webpack目录下，新建src源代码目录。
  • 并在src 目录下，新建 index.html、和 index.js

1.4 安装jQuery

  • 执行命令：npm install jquery -S
  • -S为--save的简写
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install jquery -Sadded 1 package in 2sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.5 安装webpack

  • 执行命令：npm install webpack webpack-cli -D
  • -D 为 --save-dev的简写
  • 若想指定版本号，用@符指定：npm install webpack@5.88.2 webpack-cli@5.1.4 -D
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install webpack webpack-cli -Dadded 117 packages in 6sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.6 配置webpack

1.6.1 创建配置文件：webpack.config.js

module.exports = {mode:'development'	//指定构建模式，可选值有：production和development
}

1.6.2 配置dev脚本

  • 打开文件 package.json，新增如下代码
 "scripts": {"dev": "webpack"},

1.7 运行dev脚本

  • 执行命令：npm run dev，对项目进行打包构建，此时构建成功之后会在生成dist目录和main.js
  • 在运行该命令npm run dev 的时候，会先读取 webpack.config.js 配置文件
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev> webpack@1.0.0 dev
> webpackasset main.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB./src/index.js 396 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 312 msD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.8 查看效果

  • 运行index.html，查看效果.

1.9 附件

1.9.1 package.json

{"name": "webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.7.0"},"devDependencies": {"webpack": "^5.88.2","webpack-cli": "^5.1.4"}
}

1.9.2 webpack.config.js

module.exports = {mode:'development'
}

1.9.3 index.js

import $ from 'jquery'$(function () {$("li:odd").css('background-color','red')$("li:even").css('background-color','pink')
})

1.9.4 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><script src="../dist/main.js"></script>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
</body>
</html>

二、webpack打包默认值

2.1 默认值

在webpack中，有如下默认约定:

  • 默认的打包入口文件为 src/index.js
  • 默认的输出文件路径为 dist/main.js

2.2 修改默认值

我们，可以在 webpack.config.js 配置文件中，修改默认值：

// 导入node.js中专门操作路径的模块
const path = require("path")    
module.exports = {mode:'development',// 打包入口的文件路径，__dirname表示当前文件的存放路径，即工程路径entry:path.join(__dirname,'./src/index.js'),output: {// 输出文件的存放路径path: path.join(__dirname,'./dist'),// 输出文件的名称filename: 'bundle.js'}
}

我们再次执行命令：npm run dev，此时生成的文件名就变成了bundle.js

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev> webpack@1.0.0 dev
> webpackasset bundle.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB./src/index.js 396 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 692 msD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

相关文章：

第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo

目录 一、创建webpack工程1.1 新建 webpack工程目录1.2 项目初始化1.3 新建src目录和文件1.4 安装jQuery1.5 安装webpack1.6 配置webpack1.6.1 创建配置文件&#xff1a;webpack.config.js1.6.2 配置dev脚本1.7 运行dev脚本 1.8 查看效果1.9 附件1.9.1 package.json1.9.2 webpa…...

编程日记 2023/7/27 12:06:41

Python（Web时代）——初识flask

flask简介 介绍 Flask是一个用Python编写的Web 微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务。它是BSD授权的&#xff0c;一个有少量限制的免费软件许可。它使用了 Werkzeug 工具箱和 Jinja2 模板引擎。 Flask 的设计理念是简单、灵活、易于扩展&a…...

编程日记 2023/7/27 12:05:40

二、SQL-5.DQL-8).案例练习

1、查询年龄为20,21,22,23岁的员工信息 select * from emp where age in(20, 21, 22, 23) and gender 女; 2、查询性别为男&#xff0c;并且年龄在20-40岁&#xff08;含&#xff09;以内的姓名为三个字的员工 select * from emp where gender 男 && age between 2…...

编程日记 2023/7/27 12:04:39

浙大数据结构第五周之05-树7 堆中的路径

题目详情&#xff1a; 将一系列给定数字依次插入一个初始为空的小顶堆H[]。随后对任意给定的下标i&#xff0c;打印从H[i]到根结点的路径。 输入格式: 每组测试第1行包含2个正整数N和M(≤1000)&#xff0c;分别是插入元素的个数、以及需要打印的路径条数。下一行给出区间[-1…...

编程日记 2023/7/27 12:03:37

C# Modbus TCP上位机测试

前面说了三菱和西门子PLC的上位机通信&#xff0c;实际在生产应用中&#xff0c;设备会有很多不同的厂家生产的PLC&#xff0c;那么&#xff0c;我们就需要一种通用的语言&#xff0c;进行设备之间的通信&#xff0c;工业上较为广泛使用的语言之一就是Modbus。 Modbus有多种连…...

编程日记 2023/7/27 12:02:35

instr字符查找函数（oracle用instr来代替like）

instr函数&#xff1a;字符查找函数。其功能是查找一个字符串在另一个字符串中首次出现的位置。 instr函数在Oracle/PLSQL中是返回要截取的字符串在源字符串中的位置。 语法 instr( string1, string2, start_position,nth_appearance ) 参数 string1&#xff1a;源字符串&am…...

编程日记 2023/7/27 12:01:34

trie树的一点理解

这个是最简单的数据结构&#xff1a;因为只需要记住两句话就能完美的写出简洁优雅的代码 1. 每次都是从根节点开始看(或者说从第零次插入的东西开始遍历&#xff0c;son[][]里面存的是第几次插入) 2每次遍历都是插入和查询的字符串 #include<iostream> using namespace …...

编程日记 2023/7/27 12:00:33

Linux CentOS监控系统的运行情况工具 - top/htop/glances/sar/nmon

在CentOS系统中&#xff0c;您可以使用以下工具来监控系统的运行情况&#xff1a; 1. top&#xff1a; top 是一个命令行工具&#xff0c;用于实时监控系统的进程、CPU、内存和负载情况。您可以使用以下命令来启动 top&#xff1a; top 输出 2. htop&#xff1a; htop 是一…...

编程日记 2023/7/27 11:59:31

Qt开发(2)——windows下调用外部程序

一、QProcess::start &#xff11;&#xff0e;阻塞性 start是非阻塞函数&#xff0c;但是这里的waitForFinished是阻塞的 2. 调用外部压缩程序7z // 目标压缩路径 QString zipFilePath destinationFolder "/" zipFileName; QStringList arguments{"a&qu…...

编程日记 2023/7/27 11:58:30

PostgreSQL查看数据库对象大小

PostgreSQL查看数据库对象大小 PostgreSQL查看数据库对象大小1、查看某个数据库大小2、查看多个数据库大小3、按顺序查看索引大小4、查看所有对象的大小 PostgreSQL查看数据库对象大小 1、查看某个数据库大小 select pg_size_pretty(pg_database_size(tzqdb));2、查看多个数据…...

编程日记 2023/7/27 11:57:29

给el-table实现列显隐

用过若依的都知道&#xff0c;在使用el-table 时候&#xff0c;实现列显隐效果是要给每个列加v-if 判断的&#xff0c;这种代码过于繁琐&#xff0c;于是翻看el-table包的代码&#xff0c;调试后发现内部的【插入】和【删除】两个方法可以达到我们要的效果。 项目不提供源码&a…...

编程日记 2023/7/27 11:56:28

为Android构建现代应用——应用架构

选择风格(Choosing a style) 我们将依照Google在《应用架构指南》中推荐的最佳实践和架构指南来构建OrderNow的架构。 这些定义包括通过各层定义组件的一些Clean Architecture原则。 层次的定义(Definition of the layers) 在应用程序中&#xff0c;我们将定义以下主要层次…...

编程日记 2023/7/27 11:55:27

49：字符串的新增方法

字符串的新增方法 String.fromCodePoint()String.raw()实例方法&#xff1a;codePointAt()实例方法&#xff1a;normalize()[实例方法&#xff1a;includes(), startsWith(), endsWith()](https://es6.ruanyifeng.com/#docs/string-methods#实例方法&#xff1a;includes(), s…...

编程日记 2023/7/27 11:54:26

Kaggle图表内容识别大赛TOP方案汇总

赛题名称&#xff1a;Benetech - Making Graphs Accessible 赛题链接&#xff1a;https://www.kaggle.com/competitions/benetech-making-graphs-accessible 赛题背景 数以百万计的学生有学习、身体或视力障碍&#xff0c;导致人们无法阅读传统印刷品。这些学生无法访问科学…...

编程日记 2023/7/27 11:53:24

DAY2,Qt（继续完善登录框，信号与槽的使用 ）

1.继续完善登录框&#xff0c;当登录成功时&#xff0c;关闭登录界面&#xff0c;跳转到新的界面中&#xff0c;来回切换页面&#xff1b; ---mychat.h chatroom.h---两个页面头文件 #ifndef MYCHAT_H #define MYCHAT_H#include <QWidget> #include <QDebug> /…...

编程日记 2023/7/27 11:52:23

【设计模式】设计原则-开闭原则

单一职责原则 定义 当应用的需求改变时&#xff0c;在不修改软件实体的源代码或者二进制代码的前提下&#xff0c;可以扩展模块的功能&#xff0c;使其满足新的需求。作用 1、方便测试&#xff1b;测试时只需要对扩展的代码进行测试。 2、提高代码的可复用性&#xff1b;粒…...

编程日记 2023/7/27 11:51:22

【2500. 删除每行中的最大值】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 给你一个 m x n 大小的矩阵 grid &#xff0c;由若干正整数组成。 执行下述操作&#xff0c;直到 grid 变为空矩阵&#xff1a; 从每一行删除值最大的元素。如果存在多个这样的值&#xff0c;删除其…...

编程日记 2023/7/27 11:50:21

Superset部署

Superset部署 1、安装依赖 (superset) [hadoopnode1 ~]$ yum install -y python-setuptools (superset) [hadoopnode1 ~]$ yum install -y gcc gcc-c libffi-devel python-devel python-pip python-wheel openssl-devel2、安装Superset 2.1 安装&#xff08;更新&#xff09;…...

编程日记 2023/7/27 11:49:20

Python3 学习笔记 ~ 怎样打印字符串

Python中变量的打印方法_python打印变量_清欢依旧的博客-CSDN博客 a 9 b 2print(f"{a} / {b} {a/b}") print(a, "//", b, "", (a//b))a -9 print(f"{a} / {b} {a/b}") print(a, "//", b, "", (a//b))...

编程日记 2023/7/27 11:48:18

postgresql安装

安装postgresql Linux下载安装地址 https://www.postgresql.org/download/linux/redhat/ 指定对应版本&#xff0c;指定完成后会生成对应的安装语句 下载对应的包 yum –y install https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-l…...

编程日记 2023/7/27 11:47:17

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/12/25 21:49:46

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/12/20 3:36:01

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/12/18 15:38:12

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/22 11:25:38

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2025/12/26 3:29:20

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

编程新知 2025/12/24 22:27:15

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/9/21 1:58:01