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

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

news 2026/4/6 0:28:36

目录

  • 一、创建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

你能不能站稳脚跟，从来不是你有多厉害，而是老板刚好需要什么

你能不能站稳脚跟，从来不是你有多厉害，而是老板刚好需要什么 目录 你能不能站稳脚跟，从来不是你有多厉害，而是老板刚好需要什么 为什么老板的需求，才是你职场的核心标尺？ 打工人的破局法则：别再埋头干活，学会按需创造价值 第一步：先搞清楚3个核心问题，精准锚定需求 …...

编程新知 2026/4/6 0:16:49

“16QAM调制与解调系统的SystemView仿真及分析”

通信原理 systemview 16QAM调制与解调系统的仿真 16QAM调制解调系统与解调系统的仿真 用SystemView建立一个16QAM调制解调器电路,分析理解系统的各个模块功能&#xff0c;观察波形图 判断是不是实现了16QAM调制解调系统功能 基本要求: (1)在SystemView软 件中构建短波16QAM仿真…...

编程新知 2026/4/5 23:36:10

2025届学术党必备的六大AI论文助手解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek DeepSeek身为人工智能写作工具&#xff0c;于学术论文撰写里能够起到辅助方面的作用&#xf…...

编程新知 2026/4/5 23:29:52

Linux依赖冲突实战：deepin-wine疑难杂症排查指南

1. 当deepin-wine遇上依赖地狱&#xff1a;报错现场还原 第一次在Ubuntu上安装deepin-wine时&#xff0c;那个满屏飘红的依赖错误让我至今记忆犹新。终端里不断刷新的"但是它将不会被安装"提示&#xff0c;像极了游戏里的连环陷阱。这类问题通常发生在混合安装32位/6…...

编程新知 2026/4/5 21:15:10

在华为OpenEuler上同时安装Python 3.8.6和3.9.0，我是如何解决依赖冲突和whl包不全问题的

在华为OpenEuler上实现Python 3.8.6与3.9.0双版本共存的实战指南 当开发环境需要同时支持Python 3.8.6和3.9.0时&#xff0c;许多开发者都会面临依赖冲突、whl包不兼容等问题。特别是在华为OpenEuler这样的企业级操作系统上&#xff0c;系统自带的Python版本可能无法满足特定项…...

编程新知 2026/4/5 20:59:01

-python-langchain框架（3-6-pdf文件分页加载 ）

一、PDF分页加载的核心应用场景在实际开发中&#xff0c;分页加载并非多余操作&#xff0c;而是针对特定场景的最优解&#xff0c;尤其适合以下几种情况&#xff1a;大型PDF文件处理&#xff1a;单文件几十页、上百页&#xff0c;甚至更大&#xff0c;一次性加载全部内容会占用…...

编程新知 2026/4/5 19:59:37

GetQzonehistory：如何一键完整导出QQ空间所有说说的终极指南

GetQzonehistory&#xff1a;如何一键完整导出QQ空间所有说说的终极指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 还记得那些年在QQ空间写下的青春记忆吗&#xff1f;那些深夜的心…...

编程新知 2026/4/5 19:51:30

告别药物研发效率困境：用REINVENT4实现智能分子设计范式突破

告别药物研发效率困境&#xff1a;用REINVENT4实现智能分子设计范式突破 【免费下载链接】REINVENT4 AI molecular design tool for de novo design, scaffold hopping, R-group replacement, linker design and molecule optimization. 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/4/5 19:19:02

t3mujinpack胶片模拟技术解析：基于Hald CLUT算法的开源胶片仿真实现

t3mujinpack胶片模拟技术解析&#xff1a;基于Hald CLUT算法的开源胶片仿真实现 【免费下载链接】t3mujinpack Collection of film emulation presets for open-source RAW developer software Darktable. 项目地址: https://gitcode.com/gh_mirrors/t3/t3mujinpack t3m…...

编程新知 2026/4/5 19:17:02

29_Z变换在工程中的实际意义

Z变换的基础概念 提出背景 引用场合 条件优势 为甚要Z变换&#xff1f; Z变换应对什么场合 机械系统 电气系统 Z变换的C语言代码&#xff08;源代码&#xff09; Z变换的C语言代码&#xff08;库函数&#xff09; 泰勒级数在Liunx中 安装库命令 xxx xxx xxx 什么文件路径下 xxx…...

编程新知 2026/4/5 18:26:13