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

webpack快速入门---webpack的安装和基本使用

news 2025/9/15 2:48:56

webpack是什么

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

 

        简单概述一下就是，webpack可以将多模块化的项目结构和兼容性较差的语法规则，打包成简单的结构，兼容性好的语法，即将复杂的内容结构简单化，缩减文件的数量，提高网络传输效率和浏览器的识别渲染。

webpack 官网(webpackjs.com)

webpack安装和使用

我们使用npm安装webpack

npm init -y

 

先初始化拿到一个package.json文件，name是项目名称（文件夹的名称），这里的description的内容其实就是md文件内的介绍（没有其他作用）

然后我们再给这个项目安装webpack，注意：一般不会对webpack进行全局安装，因为再不同的项目里，可能webpack的版本不同会产生错误，所以我们对每个项目都单独安装webpack

npm install webpack webpack-cli -save-dev

这里可以看到安装成功后，多了一个json文件和node_modules文件夹，以及package.json中多了一个devDependencies属性，这里显示了我们安装的webpack包

接下来再目录下创建webpack.config.js配置文件和src文件夹（这里是项目要打包的主要代码）

然后我们需要对webpack.config.js文件进行一些配置


// 引用nodejs的path模块
const path = require("path");module.exports = {mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称}
}

这里使用了path的join方法，它指向了一个路径，__dirname表示当前的文件所在的根目录（webpack.config.js在webpackApp的目录下，这里就表示webpackApp），

然后将我们自己的代码写到src中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webpack入门</title>
</head>
<body><p>webpack的基本使用</p>
</body>
</html>
let fn = (num)=>{return num;
}// es6的箭头函数
console.log("webpack打包," ,fn(10));

 配置一些package的脚本script

"build":"webpack"

此时我们就可以通过build指令来运行webpack

npm run build

可以看到在根目录下多了一个dist文件夹，里面有一个bundle.js文件，这个文件就是index.js打包后的内容，

插件

但是src中还有一个html文件并没有被打包进来，这里我们需要一个插件，将html也进行打包

npm install html-webpack-plugin --save-dev

安装好插件后，可以在package.json中看到这个插件，

接下来对这个插件进行导入配置


// 引用nodejs的path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},plugins:[new HtmlWebpackPlugin({template:path.join(__dirname,"src","index.html"),// 打包入口filename : "index.html"// 指定的打包后文件名称})]
}

然后我们在执行一次打包命令

可以看到dist目录下多了一个html文件，同时这个文件相比打包前的文件多了一个script标签自动引入了js

打开可以查看网页

导入server服务包

npm install webpack-dev-server -save-dev// 安装webpack-dev-server,实时更新打包文件

更新一下webpack.config.js devServer配置


// 引用nodejs的path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},plugins:[new HtmlWebpackPlugin({template:path.join(__dirname,"src","index.html"),// 打包入口filename : "index.html"// 指定的打包后文件名称})],devServer:{port: 5000,static : path.join(__dirname,"dist")}}

在package.json中的script脚本添加dev命令 

"dev": "webpack-dev-server"

然后运行命令

npm run dev

这里开启了一个服务，端口号为5000

此时我们可以修改src中的代码，页面会立刻刷新， 

 注意：在修改内容后自动更新，但这里并没有生成新文件，而是存储在浏览器内存中，原来的dist文件夹没有变化，所以这里只是预览变化，要真正打包项目还是需要使用build命令

编译es6代码

我们可以注意到，在src中的箭头函数打包后并没有变化，这里我们需要配置模板语法，编译es6代码

npm install @babel/core @babel/preset-env babel-loader --save-dev

这里我们需要新建一个.babelrc文件，和对webpack.config.js进行配置

 module:{//配置模板rules:[//规则设置{test: /\.js$/,//只对js文件生效loader: "babel-loader",// 转换es6include:path.join(__dirname,"src"),//处理src内的文件exclude:/node_modules/ //不处理node_modules内的文件}]}
{// 预设：Babel的一系列插件的集合"presets": ["@babel/preset-env"]
}

然后再打包项目查看 npm run build

可以看到箭头函数被编译了

到这里我们就基本掌握了webpack打包项目的使用,当然webpack还有更强大的功能，这里仅仅只是它最基础的功能，他还有更多的包和插件以及衍生功能，

总结

完整目录

主要代码

// webpack.config.js:// 引用nodejs的path模块
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},module:{//配置模板rules:[//规则设置{test: /\.js$/,//只对js文件生效loader: "babel-loader",// 转换es6include:path.join(__dirname,"src"),//处理src内的文件exclude:/node_modules/ //不处理node_modules内的文件}]},plugins:[new HtmlWebpackPlugin({template:path.join(__dirname,"src","index.html"),// 打包入口filename : "index.html"// 指定的打包后文件名称})],devServer:{port: 5000,static : path.join(__dirname,"dist")}
}

// package.json:{"name": "webpackapp","version": "1.0.0","description": "我的第一个webpackApp","main": "index.js","scripts": {"build": "webpack","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.24.6","@babel/preset-env": "^7.24.6","babel-loader": "^9.1.3","html-webpack-plugin": "^5.6.0","webpack": "^5.91.0","webpack-cli": "^5.1.4","webpack-dev-server": "^5.0.4"}
}

// .babelrc:
{// 预设：Babel的一系列插件的集合"presets": ["@babel/preset-env"]
}

相关文章：

webpack快速入门---webpack的安装和基本使用

webpack是什么 本质上&#xff0c;webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时&#xff0c;它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)&#xff0c;然后将你项目中所需的每一个模块组合成一个或多个 bund…...

编程日记 2024/6/7 3:17:40

后端开发面经系列 -- 华为C++一面面经

HUAWEI – C一面面经 公众号&#xff1a;阿Q技术站 来源&#xff1a;https://www.nowcoder.com/feed/main/detail/b8113ff340d7444985b32a73c207c826 1、计网的协议分几层&#xff1f;分别叫什么&#xff1f; OSI七层模型 物理层 (Physical Layer): 负责物理设备之间的原始比…...

编程日记 2024/6/7 3:16:39

csrf漏洞与ssrf漏洞

环境&#xff1a;用kali搭建的pikachu靶场 一.CSRF 1.CSRF漏洞简介 跨站请求伪造&#xff08;CSRF&#xff09;漏洞是一种Web应用程序安全漏洞&#xff0c;攻击者通过伪装成受信任用户的请求来执行未经授权的操作。这可能导致用户在不知情的情况下执行某些敏感操作&#xff0…...

编程日记 2024/6/7 3:15:38

AWS EC2服务器开启root密码，SSH登录

1) EC2 Instance Connect连接&#xff0c;更改root密码 sudo passwd root 2&#xff09;接着切换到切换到 root 身份&#xff0c;编辑 SSH 配置文件 $ sudo -i$ vi /etc/ssh/sshd_configPasswordAuthentication no&#xff0c;把 no 改成 yes #PermitRootLogin prohibit-passw…...

编程日记 2024/6/7 3:14:37

常见代码版本管理工具

目录 一、引言 二、Gitee &#xff08;一&#xff09;优点与特点 &#xff08;二&#xff09;缺点 &#xff08;三&#xff09;使用报告 三、GitHub 四、SVN 五、总结 一、引言 在软件开发过程中&#xff0c;代码版本控制工具是不可或缺的。Gitee、GitHub和SVN是三种常…...

编程日记 2024/6/7 3:13:37

最新版点微同城源码34.7+全套插件+小程序前后端

带全套插件 自己耐心点配置一下插件 可以H5可以小程序 一款专属的同城服务平台对于企业和个人而言&#xff0c;无疑是拓展业务、提升服务品质的重要一环。点微同城源码搭配全套插件&#xff0c;以及完善的小程序前后端&#xff0c;将为您的业务发展提供强大支持 源码免费下载…...

编程日记 2024/6/7 3:12:35

逻辑回归及python实现

概述 logistic回归是一种广义线性回归&#xff08;generalized linear model&#xff09;&#xff0c;因此与多重线性回归分析有很多相同之处。它们的模型形式基本上相同&#xff0c;都具有 w‘xb&#xff0c;其中w和b是待求参数&#xff0c;其区别在于他们的因变量不同&#x…...

编程日记 2024/6/7 3:07:32

大模型押题高考语文作文，带着大模型参加语文高考会怎么样？

前沿 大语言模型通常是指那些经过大量数据训练，能够理解和生成自然语言文本的人工智能系统。这些模型通常具有数百万到数十亿个参数，能够执行多种语言任务，例如语言翻译、文本摘要、问答系统、文本生成等。大语言模型能够捕捉语言的复杂性和细微差别，提供更加准确和自然的…...

编程日记 2024/6/7 3:06:31

Linux Ext2/3/4文件系统

文章目录 前言一、Linux文件系统简介1.1 简介1.2 Linux File System Structure1.3 Directory Structure 二、Ext2/3/4文件系统2.1 Minix2.2 EXT2.3 EXT22.4 EXT32.5 EXT4 三、EXT Inode参考资料 前言 这篇文章介绍了Linux文件系统的一些基础知识&#xff1a;Linux 文件系统简介…...

编程日记 2024/6/7 3:05:30

SIMBA方法解读

目录 预处理scRNA-seqscATAC-seq 图构建&#xff08;5种场景&#xff09;scRNA-seq分析scATAC-seq分析多模态分析批次整合多模态整合 图学习SIMBA空间中查询实体识别TF-target genes 预处理 scRNA-seq 过滤掉在少于三个细胞中表达的基因。原始计数按文库大小标准化&#xff0…...

编程日记 2024/6/7 3:03:28

VueRoute url参数

版本 4.x 获取query参数 使用$router.query&#xff0c;可以获取参数对应的json对象。 获取url参数 需要在路由配置中定义。使用$router.param获取。...

编程日记 2024/6/7 3:02:27

WPS表格插件方方格子【凑数】功能:选出和等于固定数字的数

文章目录 后来发现可以下载方方格子插件&#xff0c;使用【凑数】功能https://ffcell.lanzouj.com/iwhfc1kjhayh【凑数】快速【凑数】 导师让沾发票&#xff0c;需要选出若干个数额的发票&#xff0c;使它们的和等于一个指定数。不知道怎么办了&#xff0c;查了一下&#xff0c…...

编程日记 2024/6/7 3:01:26

通过SpringCloudGateway中的GlobalFilter实现鉴权过滤

1.pom.xml中加入gateway jar包 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency> 2.创建权限过滤器 SecurityFilter /*** 鉴权过滤***/ Slf4j Component …...

编程日记 2024/6/7 3:00:24

TCP／IP(网络编程)

一、网络每一层的作用 &#xff0a;网络接口层和物理层的作用&#xff1a;屏蔽硬件的差异&#xff0c;通过底层的驱动&#xff0c;会提供统一的接口&#xff0c;供网络层使用 &#xff0a;网络层的作用&#xff1a;实现端到端的传输 &#xff0a;传输层:数据应该交给哪一个任…...

编程日记 2024/6/7 2:57:21

网工内推 | 网络运维工程师，H3CIE认证优先，13薪，享股票期权

01 畅读 &#x1f537;招聘岗位&#xff1a;高级网络运维工程师 &#x1f537;职责描述&#xff1a; 1.负责线上业务网络技术运维工作&#xff0c;保障并优化线上网络质量&#xff1b; 2.规划并构建公司线上业务网络架构&#xff1b; 3.规划线上业务网络质量评估与监控体系&…...

编程日记 2024/6/7 2:56:20

QT C++ 基于word模板 在书签位置写入文字和图片

如果你有按模版批量自动化操作word文件的需求&#xff0c;那么本文能给你一定的帮助。 它能满足你程序自动化生成报表的需求。常常用于上位机、测试仪器的软件中。 需要你你自己做个word模版文档&#xff0c;添加2个书签。点按钮&#xff0c;会按照你的模板文档生成一个同样的…...

编程日记 2024/6/7 2:54:18

根据word模板生成word内容（JAVA）

主要是借助 poi-tl 来实现业务需求 当时第一次尝试的是Apache poi不是很好用&#xff0c;不推荐 第二次是xml&#xff0c;找的眼睛都花了&#xff0c;不推荐 要求&#xff1a;jdk1.8&#xff0c;Apache POI5.2.2 我这里使用的是5.2.3版本 文档&#xff1a;Poi-tl Documentati…...

编程日记 2024/6/7 2:53:17

vscode运行命令报错：标记“”不是此版本中的有效语句分隔符。

1. 报错问题 标记“&&”不是此版本中的有效语句分隔符。 2. 解决办法 将 terminal 中的 owershell 改成 cmd 就 ok...

编程日记 2024/6/7 2:52:16

搜索与图论：树的重心

搜索与图论&#xff1a;树的重心 题目描述参考代码 题目描述 输入样例 9 1 2 1 7 1 4 2 8 2 5 4 3 3 9 4 6输出样例 4参考代码 #include <cstring> #include <iostream> #include <algorithm>using namespace std;const int N 100010, M N * 2;int n, m…...

编程日记 2024/6/7 2:50:15

程序代写，代码编写

Java 项目代做&#xff0c;小程序&#xff0c;安卓&#xff0c;鸿蒙&#xff0c;VUE 程序代写 Java调试安装、项目运行、代码代做、环境配置、工具安装、代码讲解、代码调试、代码运行、代码部署、项目调试、项目部署、Java Web、Spring Boot、项目设计、前后端分离、代码报错解…...

编程日记 2024/6/7 2:49:14

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/8/28 23:03:34

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/9/6 15:45:27

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/8/2 6:48:59

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/7/12 9:05:51

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/9/3 23:20:22

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

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

编程新知 2025/9/5 15:09:48

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/9/13 0:08:53

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/8/1 7:53:11

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/9/2 5:09:11