Webpack 基础入门

一、Webpack 是什么

Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中，我们的项目会包含各种类型的文件，如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件，以便在浏览器中高效加载。它就像是一个超级管家，把项目中的各种资源整理打包，让它们能更好地协同工作。

二、为什么要使用 Webpack

  1. 代码拆分：可以将代码拆分成多个块，实现按需加载，提高页面加载速度。比如一个大型项目，有些功能可能不是用户一开始就需要的，Webpack 可以把这些功能代码单独打包，等用户用到时再加载。
  2. 模块加载：支持各种模块加载方式，如 ES6 模块、CommonJS 模块等，统一管理项目中的模块依赖。
  3. 处理不同类型文件：不仅能处理 JavaScript，还能处理 CSS、Sass、Less 等样式文件，以及图片、字体等资源文件。

三、Webpack 基础入门

（一）安装 Webpack

  1. 首先确保你已经安装了 Node.js，因为 Webpack 是基于 Node.js 运行的。
  2. 全局安装 Webpack 和 Webpack - CLI（命令行界面）：
npm install webpack webpack - cli -g

（二）创建项目结构

  1. 创建一个新的文件夹，例如webpack - demo。
  2. 在该文件夹下创建以下文件和文件夹：
    • src文件夹：用于存放源文件，在src文件夹下创建index.js文件。
    • dist文件夹：用于存放打包后的文件，这个文件夹一开始可以不存在，Webpack 会在打包时自动生成。

（三）编写基础代码

在src/index.js中编写如下代码：

function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);

（四）配置 Webpack

在项目根目录下创建webpack.config.js文件，内容如下：

const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}
};

这里配置了入口文件entry为src/index.js，表示从这个文件开始打包；output指定了打包后的文件名filename为bundle.js，输出路径path为dist文件夹。

（五）执行打包

在命令行中进入项目根目录，执行以下命令：

webpack - - config webpack.config.js

执行成功后，会在dist文件夹下生成bundle.js文件。这个文件就是打包后的文件，包含了src/index.js中的代码以及相关依赖。

四、Webpack 核心功能

（一）加载器（Loaders）

  1. 作用：Webpack 本身只能处理 JavaScript 和 JSON 文件，Loaders 可以让 Webpack 处理其他类型的文件，如 CSS、图片等。
  2. 使用示例 - 加载 CSS 文件：
    • 安装css - loader和style - loader：
npm install css - loader style - loader --save - dev
  • 在src文件夹下创建styles.css文件，添加一些简单的样式：
body {background - color: lightblue;
}
  • 修改src/index.js文件，引入styles.css：
import './styles.css';
function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);
  • 修改webpack.config.js文件，配置加载器：
const path = require('path');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]}
};

这里module.rules配置了一个规则，test表示匹配所有.css文件，use指定了使用style - loader和css - loader来处理这些文件。css - loader负责解析 CSS 文件，style - loader负责将解析后的 CSS 插入到 HTML 页面中。

（二）插件（Plugins）

  1. 作用：插件可以扩展 Webpack 的功能，实现更复杂的任务，如代码压缩、生成 HTML 文件、提取 CSS 为单独文件等。
  2. 使用示例 - 使用 HtmlWebpackPlugin 生成 HTML 文件：
    • 安装html - webpack - plugin：
npm install html - webpack - plugin --save - dev
  • 修改webpack.config.js文件，添加插件配置：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})]
};

这里引入了HtmlWebpackPlugin插件，配置了title为页面标题，template指定了使用src/index.html作为模板来生成 HTML 文件。在src文件夹下创建index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF - 8"><title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body><script src="bundle.js"></script>
</body>
</html>

再次执行打包命令，会在dist文件夹下生成一个 HTML 文件，并且自动引入了打包后的bundle.js文件。

  1. 常用插件补充
    • TerserPlugin：用于压缩 JavaScript 代码，减小文件体积，提升加载速度。它是 Webpack 4 + 版本默认的代码压缩插件，无需额外安装。在webpack.config.js中配置如下：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const TerserPlugin = require('terser - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})],optimization: {minimizer: [new TerserPlugin()]}
};
  • MiniCssExtractPlugin：将 CSS 从 JavaScript 文件中提取出来，生成单独的 CSS 文件。这在生产环境中很有用，因为浏览器可以单独缓存 CSS 文件。安装命令：
npm install mini - css - extract - plugin --save - dev

在webpack.config.js中配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'}),new MiniCssExtractPlugin({filename:'styles.css'})]
};
  • CleanWebpackPlugin：在每次打包前清空输出目录，避免残留旧文件。安装命令：
npm install clean - webpack - plugin --save - dev

在webpack.config.js中配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
const MiniCssExtractPlugin = require('mini - css - extract - plugin');
const { CleanWebpackPlugin } = require('clean - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'}),new MiniCssExtractPlugin({filename:'styles.css'}),new CleanWebpackPlugin()]
};

（三）代码拆分与按需加载配置

  1. 原理：Webpack 的代码拆分是指将一个大的 JavaScript 文件拆分成多个小的文件，这些小文件可以在需要的时候再加载。按需加载就是在特定的时机（比如用户点击某个按钮、访问某个路由等）才加载对应的代码块，而不是在页面一开始就加载所有代码，从而提高页面的初始加载速度和用户体验。
  2. 基础配置：在 Webpack 4 + 版本中，可以使用splitChunks配置项来实现代码拆分。在webpack.config.js中添加如下配置：
const path = require('path');
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),// 为动态导入的代码块指定输出路径和文件名chunkFilename: '[name].[chunkhash].js'},module: {rules: [{test: /\.css$/,use: ['style - loader', 'css - loader']}]},plugins: [new HtmlWebpackPlugin({title: 'Webpack Demo',template: './src/index.html'})],optimization: {splitChunks: {chunks: 'all'}}
};

optimization.splitChunks.chunks: 'all’表示对所有类型的 chunk（入口 chunk、异步 chunk 等）都进行代码拆分。这里output.chunkFilename用于指定非入口 chunk（动态导入的代码块）的输出文件名，[name]会被替换为代码块的名称，[chunkhash]会根据代码块内容生成哈希值，用于缓存控制。

  1. 实际应用示例 - 动态导入模块实现按需加载：
    • 在src文件夹下创建一个新的文件math.js，编写如下代码：
export function multiply(a, b) {return a * b;
}
  • 修改src/index.js文件，通过动态导入的方式引入math.js模块：
import './styles.css';
function add(a, b) {return a + b;
}
const result = add(1, 2);
console.log(result);
// 点击按钮时动态导入math.js模块并调用multiply函数
document.addEventListener('DOMContentLoaded', function () {const button = document.createElement('button');button.textContent = '点击计算乘法';document.body.appendChild(button);button.addEventListener('click', function () {import('./math.js').then((module) => {const product = module.multiply(3, 4);console.log('乘法结果:', product);});});
});

这里使用import(‘./math.js’)动态导入math.js模块，这是 ES2020 引入的动态导入语法，Webpack 会自动将其拆分成一个单独的代码块。当用户点击按钮时，才会加载这个代码块，实现了按需加载。执行打包命令后，在dist文件夹下会生成除了bundle.js之外的math.[chunkhash].js文件，这就是拆分出来的代码块。

五、总结

通过以上步骤，我们对 Webpack 的基础和核心功能有了初步了解。Webpack 还有很多高级特性，如代码优化、热模块替换等，后续可以进一步深入学习。希望这篇文章能帮助大家顺利入门 Webpack，开启高效的 Web 开发之旅。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/19640.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

gsoap实现webservice服务

gsoap实现webservice服务

gsoap实现webservice服务 在实现Web服务时&#xff0c;使用gSOAP是一个很好的选择&#xff0c;因为它提供了强大的工具和库来创建SOAP和RESTful服务。gSOAP是一个C和C语言开发的库&#xff0c;它支持SOAP协议的各种版本&#xff0c;包括SOAP 1.1和SOAP 1.2。下面是如何使用gSO…
阅读更多...
穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝

穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝

穷举 vs 暴搜 vs 深搜 vs 回溯 vs 剪枝 1. 全排列2. 子集 1. 全排列 题目链接&#xff1a;46. 全排列 算法原理&#xff1a; 画出决策树 设计函数 全局变量&#xff1a;二维数组ret存储结果&#xff1b;一维数组path存储路径&#xff1b;boolean类型一维数组visited表示当…
阅读更多...
NAT（网络地址转换）技术详解：网络安全渗透测试中的关键应用与防御策略

NAT（网络地址转换）技术详解：网络安全渗透测试中的关键应用与防御策略

目录 NAT的作用 NAT类型 NAT工作流程示例 NAT 转换技术的原理 源地址转换&#xff08;SNAT&#xff0c;Source NAT&#xff09;&#xff1a; 目标地址转换&#xff08;DNAT&#xff0c;Destination NAT&#xff09;&#xff1a; 端口地址转换&#xff08;PAT&#xff0c…
阅读更多...
OpenCV图像基本操作

OpenCV图像基本操作

学习目标&#xff1a; 学习一些OpenCV中对于图像的基本操作 学习内容&#xff1a; 第一步导入库和所需的图像。 import cv2 import numpy as np imgcv2.imread("lena.png") # cv2.imshow("img",img) # cv2.waitKey(0) 访问和修改图片像素 访问图片像素…
阅读更多...
具身智能在智能巡检机器人中的应用——以开关柜带电操作机器人为例

具身智能在智能巡检机器人中的应用——以开关柜带电操作机器人为例

随着机器人技术和人工智能的迅速发展&#xff0c;具身智能在各行业的应用日益广泛&#xff0c;尤其是在电力行业中的智能巡检领域。传统的电力巡检和维护工作通常需要人工操作&#xff0c;存在着高温、高压、强电磁场等危险环境&#xff0c;且效率较低。开关柜带电操作机器人作…
阅读更多...
巨控GRM530系列的远程模块用于PLC远程上下载方案

巨控GRM530系列的远程模块用于PLC远程上下载方案

巨控GRM530系列的远程模块用于PLC远程上下载方案 一、方案概述 巨控科技基于全球加速服务器与智能通讯模块&#xff0c;提供高效、安全的工业设备远程上下载及维护服务。支持多协议PLC、触摸屏、运动控制器等设备&#xff0c;突破地域限制&#xff0c;实现跨国、跨网络的无缝调…
阅读更多...
fastadmin快速搭建导航站和API接口站点系统

fastadmin快速搭建导航站和API接口站点系统

这份源码是基于fastadmin框架制作的&#xff0c;不仅可以快速搭建漂亮的导航站和API接口站点&#xff0c;而且还具有可扩展性和定制性。源码开放&#xff0c;方便二次开发和定制&#xff0c;适合各种需求。快来体验这个功能强大的站点源码&#xff0c;为您的项目提供便捷解决方…
阅读更多...
【VB语言】EXCEL中VB宏的应用

【VB语言】EXCEL中VB宏的应用

【VB语言】EXCEL中VB宏的应用 文章目录 [TOC](文章目录) 前言一、EXCEL-VB1.实验过程2.代码 二、EXCEL-VB 生成.c.h文件1.实验过程2.代码 四、参考资料总结 前言 1.WPS-VB扩展包 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、EXCEL-VB 1.实验过…
阅读更多...
告别第三方云存储！用File Browser在Windows上自建云盘随时随地访问

告别第三方云存储！用File Browser在Windows上自建云盘随时随地访问

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 无论是个人用户还是企业团队&#xff0c;都希望能够有一个高效、安全的解决方案来…
阅读更多...
[250217] x-cmd 发布 v0.5.3：新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理

[250217] x-cmd 发布 v0.5.3：新增 DeepSeek AI 模型支持及飞书/钉钉群机器人 Webhook 管理

目录 X-CMD 发布 v0.5.3&#x1f4c3;Changelog&#x1f9e9; deepseek&#x1f9e9; feishu|dingtalk&#x1f4e6; x-cmd✅ 升级指南 X-CMD 发布 v0.5.3 &#x1f4c3;Changelog &#x1f9e9; deepseek 新增 deepseek 模块&#xff0c;用户可通过 deepseek 直接请求使用 …
阅读更多...
Kubernetes控制平面组件：etcd常用配置参数

Kubernetes控制平面组件：etcd常用配置参数

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes架构原则和对象设计&#xff08;三&#xff09;Kubernetes控…
阅读更多...
Docker 入门与实战：从安装到容器管理的完整指南

Docker 入门与实战：从安装到容器管理的完整指南

&#x1f680; Docker 入门与实战&#xff1a;从安装到容器管理的完整指南 &#x1f31f; &#x1f4d6; 简介 在现代软件开发中&#xff0c;容器化技术已经成为不可或缺的一部分。而 Docker 作为容器化领域的领头羊&#xff0c;以其轻量级、高效和跨平台的特性&#xff0c;深…
阅读更多...
Android 14输入系统架构分析：图解源码从驱动层到应用层的完整传递链路

Android 14输入系统架构分析：图解源码从驱动层到应用层的完整传递链路

一、资料快车 1、深入了解Android输入系统&#xff1a;https://blog.csdn.net/innost/article/details/47660387 2、书籍 - Android系统源代码情景分析 二、Perface 1、参考&#xff1a; 2、系统程序分析方法 1&#xff09;加入log&#xff0c;并跟着log一步步分析 -logc…
阅读更多...
HarmonyOS-ArkTS基础快速入门

HarmonyOS-ArkTS基础快速入门

目录 ArkTS 快速入门 ArkTS 快速入门 如图&#xff0c;index.etc里面的内容&#xff08;图中框住的大长方形区域&#xff09;会渲染到预览区中&#xff0c;而console.log(xx,xxx)用于内容的打印&#xff0c;需要在日志中查看打印的内容
阅读更多...
FRRouting配置与OSPF介绍，配置，命令，bfd算法：

FRRouting配置与OSPF介绍，配置，命令，bfd算法：

文章目录 1、frrouting的配置&#xff1a;2、ospf2.1、检测和维护邻居关系2.2、ospfDR和BDR2.3、odpf邻居表2.4、ospf常用命令2.5、bfd配置 1、frrouting的配置&#xff1a; sudo service zebra start sudo service ospfd start telnet localhost 2604 en configure termina…
阅读更多...
2-安装YIUI

2-安装YIUI

YIUI框架&#xff1a;GitHub - LiShengYang-yiyi/YIUI: Unity3D UGUI Framework, 基于UI数据事件绑定为核心 数据驱动的UGUI框架, ETUI框架, ET框架官方推荐UI框架 ET框架&#xff1a;egametang/ET: Unity3D Client And C# Server Framework (github.com) 1 - 安装YIUI框架&a…
阅读更多...
001-监控你的文件-FSWatch-C++开源库108杰

001-监控你的文件-FSWatch-C++开源库108杰

fswatch 原理与应用简介fswatch 安装fswatch 实践应用具体应用场景与细节补充 1. 简介 有些知识&#xff0c;你知道了不算厉害&#xff0c;但你要是不知道&#xff0c;就容易出乱。 很多时候&#xff0c;程序需要及时获取磁盘上某个文件对象&#xff08;文件夹、文件&#xff0…
阅读更多...
机器学习--逻辑回归

机器学习--逻辑回归

机器学习–逻辑回归 一、认知革命&#xff1a;从线性回归到逻辑回归 1.1 本质差异对比 维度线性回归逻辑回归输出类型连续值概率值 (0-1)目标函数最小二乘法极大似然估计数学表达式 y w T x b yw^Txb ywTxb p 1 1 e − ( w T x b ) p\frac{1}{1e^{-(w^Txb)}} p1e−(wTxb…
阅读更多...
s1K 数据集：是一个用于提升语言模型推理能力的高质量数据集。包含 1,000 个问题，每个问题都配有详细的 推理路径 和 答案。

s1K 数据集：是一个用于提升语言模型推理能力的高质量数据集。包含 1,000 个问题，每个问题都配有详细的 推理路径 和 答案。

2025-02-07&#xff0c; 由斯坦福大学、华盛顿大学等研究机构创建了 s1K 数据集&#xff0c;该数据集包含 1,000 个精心挑选的问题&#xff0c;并配以推理轨迹和答案&#xff0c;为语言模型推理能力的提升提供了重要的数据基础。 一、研究背景 1. 研究背景 近年来&#xff0c;…
阅读更多...
DockerDesktop更改默认的磁盘镜像地存储位置

DockerDesktop更改默认的磁盘镜像地存储位置

DockerDesktop更改默认的磁盘镜像地存储位置 文章目录 DockerDesktop更改默认的磁盘镜像地存储位置1. 默认存储位置2. 新建一个目录3. 将磁盘镜像存储位置改为新建的目录下 1. 默认存储位置 2. 新建一个目录 如&#xff1a;D:\DiskImagelocationData 3. 将磁盘镜像存储位置改为…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023