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服务 在实现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 剪枝 1. 全排列2. 子集 1. 全排列 题目链接&#xff1a;46. 全排列 算法原理&#xff1a; 画出决策树 设计函数 全局变量&#xff1a;二维数组ret存储结果&#xff1b;一维数组path存储路径&#xff1b;boolean类型一维数组visited表示当…

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

目录 NAT的作用 NAT类型 NAT工作流程示例 NAT 转换技术的原理 源地址转换&#xff08;SNAT&#xff0c;Source NAT&#xff09;&#xff1a; 目标地址转换&#xff08;DNAT&#xff0c;Destination NAT&#xff09;&#xff1a; 端口地址转换&#xff08;PAT&#xff0c…

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远程上下载方案 一、方案概述 巨控科技基于全球加速服务器与智能通讯模块&#xff0c;提供高效、安全的工业设备远程上下载及维护服务。支持多协议PLC、触摸屏、运动控制器等设备&#xff0c;突破地域限制&#xff0c;实现跨国、跨网络的无缝调…

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

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

【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上自建云盘随时随地访问

文章目录 前言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 管理

目录 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常用配置参数

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes架构原则和对象设计&#xff08;三&#xff09;Kubernetes控…

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

&#x1f680; Docker 入门与实战&#xff1a;从安装到容器管理的完整指南 &#x1f31f; &#x1f4d6; 简介 在现代软件开发中&#xff0c;容器化技术已经成为不可或缺的一部分。而 Docker 作为容器化领域的领头羊&#xff0c;以其轻量级、高效和跨平台的特性&#xff0c;深…

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基础快速入门

目录 ArkTS 快速入门 ArkTS 快速入门 如图&#xff0c;index.etc里面的内容&#xff08;图中框住的大长方形区域&#xff09;会渲染到预览区中&#xff0c;而console.log(xx,xxx)用于内容的打印&#xff0c;需要在日志中查看打印的内容

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

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杰

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 个问题,每个问题都配有详细的 推理路径 和 答案。

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

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

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