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.mzph.cn/web/70163.shtml

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

相关文章

torchsparse安装过程的问题

torchsparse安装过程的问题

1、项目要求torchsparse githttps://github.com/mit-han-lab/torchsparse.gitv1.4.0 2、torch1.8.1cu111 nvcc--version&#xff1a;11.1 这个版本的cuda匹配的gcc、g经常是7.5。设置为7.5. &#xff08;这个gcc、g版本修改不一定&#xff0c;可以先进行后面的&#xff0c…
阅读更多...
嵌入式音视频开发（二）ffmpeg音视频同步

嵌入式音视频开发（二）ffmpeg音视频同步

系列文章目录 嵌入式音视频开发&#xff08;零&#xff09;移植ffmpeg及推流测试 嵌入式音视频开发&#xff08;一&#xff09;ffmpeg框架及内核解析 嵌入式音视频开发&#xff08;二&#xff09;ffmpeg音视频同步 嵌入式音视频开发&#xff08;三&#xff09;直播协议及编码器…
阅读更多...
iOS App的启动与优化

iOS App的启动与优化

App的启动流程 App启动分为冷启动和热启动 冷启动&#xff1a;从0开始启动App热启动&#xff1a;App已经在内存中&#xff0c;但是后台还挂着&#xff0c;再次点击图标启动App。 一般对App启动的优化都是针对冷启动。 App冷启动可分为三个阶段&#xff1a; dyld&#xff1a…
阅读更多...
oppo，汤臣倍健，康冠科技25届春招内推

oppo，汤臣倍健，康冠科技25届春招内推

oppo&#xff0c;汤臣倍健&#xff0c;康冠科技25届春招内推 ①康冠科技25届春招 【职位】算法、软件、硬件、技术&#xff0c;结构设计&#xff0c;供应链&#xff0c;产品&#xff0c;职能&#xff0c;商务 【一键内推】https://sourl.cn/2Mm9Lk 【内推码】EVBM88 ②汤臣倍健…
阅读更多...
centos 9 时间同步服务

centos 9 时间同步服务

在 CentOS 9 中&#xff0c;默认的时间同步服务是 chrony&#xff0c;而不是传统的 ntpd。 因此&#xff0c;建议使用 chrony 来配置和管理时间同步。 以下是使用 chrony 配置 NTP 服务的步骤&#xff1a; 1. 安装 chrony 首先&#xff0c;确保系统已安装 chrony。 在 CentOS…
阅读更多...
解锁 Python 导入系统：从基础到进阶的深度指南

解锁 Python 导入系统：从基础到进阶的深度指南

本文全面解读 Python 导入系统&#xff0c;从导入机制的基础概念&#xff0c;如模块、包的导入方式&#xff0c;到查找、加载模块的详细过程&#xff0c;再到导入系统的高级特性和应用场景&#xff0c;通过丰富示例、直观图表和对比分析&#xff0c;助你深入理解并熟练运用导入…
阅读更多...
DDoS技术解析

DDoS技术解析

这里是Themberfue 今天我们不聊别的&#xff0c;我们聊聊著名的网络攻击手段之一的 DDoS&#xff0c;看看其背后的技术细节。 DoS 了解 DDoS 前&#xff0c;先来讲讲 DoS 是什么&#xff0c;此 DoS 而不是 DOS 操作系统啊。1996年9月6日&#xff0c;世界第三古老的网络服务提供…
阅读更多...
docker安装kafka,并通过springboot快速集成kafka

docker安装kafka,并通过springboot快速集成kafka

目录 一、docker安装和配置Kafka 1.拉取 Zookeeper 的 Docker 镜像 2.运行 Zookeeper 容器 3.拉取 Kafka 的 Docker 镜像 4.运行 Kafka 容器 5.下载 Kafdrop 6.运行 Kafdrop 7.如果docker pull wurstmeister/zookeeper或docker pull wurstmeister/kafka下载很慢&#x…
阅读更多...
C++ 与 Java 的对比分析：除法运算中的错误处理

C++ 与 Java 的对比分析：除法运算中的错误处理

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 &#x1f4af;前言&#x1f4af;C中的除法错误处理&#x1f4af;Java中的除法错误处理&#x1f4af;C与Java错误处理的对比&#x1f4af;错误处理的优化和实践&#x1f4af;小结 &#x1f4af;前言 在…
阅读更多...
LLM之循环神经网络(RNN)

LLM之循环神经网络(RNN)

在人工智能的领域中&#xff0c;神经网络是推动技术发展的核心力量。今天&#xff0c;让我们深入探讨循环神经网络&#xff08;RNN&#xff09; 一、神经网络基础 &#xff08;1&#xff09;什么是神经网络 神经网络&#xff0c;又称人工神经网络&#xff0c;其设计灵感源于人…
阅读更多...
SQL sever数据导入导出实验

SQL sever数据导入导出实验

1.创建数据库TCP-H &#xff08;1&#xff09;右键“数据库”&#xff0c;点击“新建数据库”即可 &#xff08;2&#xff09;用sql语言创建&#xff0c;此处以创建数据库DB_test为例&#xff0c;代码如下&#xff1a; use master;go--检查在当前服务器系统中的所有数据里面…
阅读更多...
让编程变成一种享受-明基RD320U显示器

让编程变成一种享受-明基RD320U显示器

引言 作为一名有着多年JAVA开发经验的从业者&#xff0c;在工作过程中&#xff0c;显示器的重要性不言而喻。它不仅是我们与代码交互的窗口&#xff0c;更是影响工作效率和体验的关键因素。在多年的编程生涯中&#xff0c;我遇到过各种各样的问题。比如&#xff0c;在进行代码…
阅读更多...
计算机网络（涵盖OSI，TCP/IP，交换机，路由器，局域网）

计算机网络（涵盖OSI，TCP/IP，交换机，路由器，局域网）

一、网络通信基础 &#xff08;一&#xff09;网络通信的概念 网络通信是指终端设备之间通过计算机网络进行的信息传递与交流。它类似于现实生活中的物品传递过程&#xff1a;数据&#xff08;物品&#xff09;被封装成报文&#xff08;包裹&#xff09;&#xff0c;通过网络…
阅读更多...
图像处理篇---基本OpenMV图像处理

图像处理篇---基本OpenMV图像处理

文章目录 前言1. 灰度化&#xff08;Grayscale&#xff09;2. 二值化&#xff08;Thresholding&#xff09;3. 掩膜&#xff08;Mask&#xff09;4. 腐蚀&#xff08;Erosion&#xff09;5. 膨胀&#xff08;Dilation&#xff09;6. 缩放&#xff08;Scaling&#xff09;7. 旋转…
阅读更多...
SpringMVC重定向接口，参数暴露在url中解决方案！RedirectAttributes

SpringMVC重定向接口，参数暴露在url中解决方案！RedirectAttributes

OK&#xff0c;首先描述下业务场景&#xff0c;终端数量限制登录 1.首先访问项目login的get接口 2.输入账号密码点击登录后&#xff0c;会请求login的POST接口 3.后台对终端数量逻辑处理不允许登录跳回到登录页面 4.因代码原因需在后台进行多次重定向接口&#xff0c;最后跳…
阅读更多...
Spring Boot01(注解、)---java八股

Spring Boot01(注解、)---java八股

Spring Boot中常用注解及其底层实现 1、SpringBootApplication注解&#xff1a; SpringBootApplication注解&#xff1a;这个注解标识了一个SpringBoot工程&#xff0c;它实际上是另外三个注解的组合&#xff0c;这三个注解是&#xff1a; aSpringBootConfiguration&#xff1a…
阅读更多...
✨2.快速了解HTML5的标签类型

✨2.快速了解HTML5的标签类型

✨✨HTML5 的标签类型丰富多样&#xff0c;每种类型都有其独特的功能和用途&#xff0c;以下是一些常见的 HTML5 标签类型介绍&#xff1a; &#x1f98b;结构标签 &#x1faad;<html>&#xff1a;它是 HTML 文档的根标签&#xff0c;所有其他标签都包含在这个标签内&am…
阅读更多...
eNSP防火墙综合实验

eNSP防火墙综合实验

一、实验拓扑 二、ip和安全区域配置 1、防火墙ip和安全区域配置 新建两个安全区域 ip配置 Client1 Client2 电信DNS 百度web-1 联通DNS 百度web-2 R2 R1 三、DNS透明代理相关配置 1、导入运营商地址库 2、新建链路接口 3、配置真实DNS服务器 4、创建虚拟DNS服务器 5、配置D…
阅读更多...
Linux 配置交换空间（Swap）解决内存不足

Linux 配置交换空间（Swap）解决内存不足

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …
阅读更多...
个人shell脚本分享

个人shell脚本分享

在周一到周五做增量备份&#xff0c;在周六周日做完全备份 #!/bin/bash定义变量 SRC“/path/to/source” # 源目录 BKUP“/backup” # 备份主目录 FUL“KaTeX parse error: Expected EOF, got # at position 22: …ull" #̲ 完全备份目录 INC"BKUP/inc” # 增量备份…
阅读更多...
最新文章

Copyright @ 2022~2023