2024 年最新前端工程师使用 Webpack 模块打包工具详细教程(更新中)

概述 Webpack 模块打包工具

Webpack 是一个现代的静态模块打包工具,用于将前端应用程序的各种资源(例如如:JavaScript、CSS、图片等)视为模块,并将它们打包成可以在浏览器中运行的静态文件。它的主要功能包括模块打包、资源优化、代码分割、加载器转换等。

Webpack 官方网址:https://webpack.js.org/

在这里插入图片描述

Webpack 在内部会构建一个依赖图(dependency graph),这个依赖图映射到项目所需的每个模块,并生成一个或多个 bundle。在打包过程中,Webpack 可以进行各种优化,如代码压缩、文件合并、按需加载等,以提高应用程序的性能和加载速度。

Webpack 的配置包括入口(entry)、出口(output)、加载器(loader)和插件(plugins)。入口决定了 Webpack 从哪个模块开始生成依赖关系图,而出口则指定了生成的静态文件的输出目录。加载器用于转换不同类型的模块,以便能够被打包和引用,而插件则用于执行更广泛的任务,如代码分割、资源优化、生成 HTML 文件等。

为了进一步提高 Webpack 的打包速度,可以使用一些优化技巧,如使用线程加载器(例如:thread-loader)来启用多线程打包,或者使用缓存加载器来缓存已经编译过的文件,从而避免重复编译。总的来说,Webpack是一个强大而灵活的工具,能够帮助开发者更高效地构建和优化前端应用程序。

下载安装 Webpack 环境

安装 Node.js 环境

访问 Node.js 官网,下载并安装适合你操作系统的Node.js版本。安装完成后,你可以在命令行中运行 node -v 来检查 Node.js 是否安装成功,以及安装的版本。

初始化项目

在你的项目文件夹中,打开命令行窗口,并输入 npm init 来初始化一个新的 npm 项目。这会创建一个 package.json 文件,这个文件会保存你的项目依赖和其他配置信息。

全局安装 webpack webpack-cli

NPM 进行全局安装 webpack webpack-cli

npm install webpack webpack-cli -g

全局安装意味着你可以在任何地方使用 webpack 和 webpack-cli 命令。然而对于大多数项目,推荐进行局部安装,以避免不同项目之间的版本冲突。

局部安装 webpack webpack-cli

如果你选择局部安装在项目的根目录下运行如下:

npm install webpack webpack-cli --save-dev

这样 webpack 和 webpack-cli 就会被添加到你的 package.json 文件的 devDependencies 部分,成为项目的开发依赖。

使用 Webpack 流程图

配置 webpack.config.js 入口 entry 出口 output

const path = require("path")module.exports = {entry: "./src/main.js",output: { path: path.join(__dirname, "dist"),filename: "bundle.js"}
}

配置 package.json script 脚本

{"description": "","scripts": {"build": "webpack"},"devDependencies": {"webpack": "^5.91.0","webpack-cli": "^5.1.4"}
}

打包流程图
在这里插入图片描述

注意:所有要被打包的资源都要跟入口产生直接 / 间接的引用关系。

使用 Webpack 打包静态网页

Webpack 本身并不直接处理 HTML 文件,但是你可以使用 html-webpack-plugin 插件来简化静态 HTML 文件的打包过程。使用 html-webpack-plugin 来简化静态 index.html 文件的打包过程了。

如何使用 html-webpack-plugin 来打包静态 index.html 的步骤:

安装必要的插件和依赖

在你的项目中,首先确保已经安装了 webpack 和 webpack-cli。安装 html-webpack-plugin

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

配置 webpack.config.js

在你的 webpack.config.js 文件中,引入 html-webpack-plugin 并添加到 plugins 数组中:

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html',})],
};

编写 index.html

在你的源代码目录(在这个例子中是 src)中,创建一个 index.html 文件。这个文件将被 html-webpack-plugin 用作模板,并且插件会自动将你的打包后的 JavaScript 文件(例如 main.js)注入到这个 HTML 文件中。

运行 webpack

当运行 webpack 构建过程时,html-webpack-plugin 会自动处理你的 index.html 文件,并将它输出到你的构建目录(默认为 dist)中。

注意事项

确保你的 HTML 文件中引用了正确的脚本和样式文件路径。在开发环境中,你可能直接引用 src 目录下的文件,但在生产环境中,这些文件会被 webpack 打包并输出到不同的位置。你可以使用 webpack 的 publicPath 配置项来确保引用路径正确。

如果你的项目中有多个 HTML 文件需要打包,你可以为每个文件创建一个 HtmlWebpackPlugin 实例,并在 plugins 数组中添加它们。

启动本地服务 webpack-dev-server

启动本地服务,可实时更新修改的代码,打包变化代码到内存中,然后直接提供端口和网页访问。也就是说以后改了 src 目录下的资源代码,就会直接更新到内存打包,然后反馈到浏览器上了。

下载 webpack-dev-server

npm install webpack-dev-server -D

配置 package.json 自定义脚本

scripts: {"build": "webpack","serve": "webpack serve"
}

运行脚本启动 webpack 开发服务器

npm run serve

使用 Webpack 打包 css 文件

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {module: { rules: [{test: /\.css$/,use: [ "style-loader", "css-loader"]}]}
}

匹配所有的 css 文件,use数组里从右向左运行,先用 css-loader 让 webpack 能够识别 css 文件的内容并打包,再用 style-loader 将样式,把 css 插入到 dom 中。

总结:webpack 默认只认识 js 文件和 json 文件。万物皆模块,引到入口才会被 webpack 打包,css打包进 js 中,然后被嵌入在 style 标签插入 dom 上。

style-loader 文档:https://webpack.docschina.org/loaders/style-loader/
css-loader 文档:https://webpack.docschina.org/loaders/css-loader/

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

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

相关文章

ClickHouse入门篇:一文带你学习ClickHouse

ClickHouse 是一个用于联机分析处理(OLAP)的列式数据库管理系统(DBMS)。由于其独特的数据存储和处理架构,ClickHouse 能够提供高速数据插入和实时查询性能。下面是对 ClickHouse 的详细介绍,包括其特性、应用场景和架构: 特性 列式存储: 数…

CUDA 12.4文档3 内存层次异构变成计算能力

5.3 内存层次 Memory Hierarchy CUDA线程在执行过程中可能会访问多个内存空间的数据,如图6所示。每个线程都有自己的私有本地内存。 每个线程块都有一个对块内所有线程可见的共享内存,并且其生命周期与块相同。线程块集群中的线程块可以对彼此的共享内…

中颖51芯片学习5. 类EEPROM操作

中颖51芯片学习5. 类EEPROM操作 一、SH79F9476 Flash存储空间1. 特性2. 分区3. OP_EEPROMSIZE选项设置3. 编程接口4. 代码保护控制模式简介(1)**代码保护模式0:**(2)**代码保护模式1:**(3&#…

ESXI 中安装 虚拟机 麒麟v10 操作系统

浏览器访问登录ESXI 上传镜像文件 创建新虚拟机 选择虚拟机名称和操作系统 选择存储 配置虚拟机 配置虚拟机 cpu 内存 硬盘 并选择虚拟机驱动 配置完成后,点击下一步,并点击完成。 开机 完成后选择该虚拟机,并打开电源 等待出现以下界面…

2023年通用人工智能AGI等级保护白皮书

今天分享的是人工智能专题系列深度研究报告:《人工智能专题:2023年通用人工智能AGI等级保护白皮书》。 通用人工智能发展现状 本章主要介绍通用人工智能的基本情况,包括其发展历史、现状以及组成架构等内容。本文还将通过从技术角度出发来分…

【复现】浙大恩特客户资源管理系统 SQL注入漏洞_71

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一: 四.修复建议: 五. 搜索语法: 六.免责声明 一.概述 浙大恩特客户资源管理系统是一款针对企业客户资源管理的软件产品。该系统旨在帮助企业高效地管理和利用客户资源,提升…

Innodb架构解析

整体架构 通过《面试官:一条SQL是如何执行的?》我们了解了MySQL架构,下面我们看下Innodb架构。 innodb最早由Innobase Oy公司开发,5.5版本开始是MySQL默认存储引擎,该存储引擎是第一个完整支持ACID事务的MySQL存储引…

一个简单的对称加密算法

以下是一个简单的对称加密算法的代码实现,使用了 Python 3 中的cryptography库: from cryptography.fernet import Fernetdef encrypt(message, key):f Fernet(key)encrypted f.encrypt(message.encode())return encrypted.decode()def decrypt(encry…

es6对于Promise 对象的详解(2024-04-11)

1、Promise 含义 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。 从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API&…

文章分享:ctDNA高通量测序临床实践专家共识(2022年版)

【摘要】 循环肿瘤DNA(circulating tumor DNA,ctDNA)高通量测序在肿瘤临床诊疗中发挥越来越重要的作用,但其临床检测标准和应用范围尚缺乏统一认识。中国抗癌协会肿瘤标志专业委员会组织相关专家,结合国内临床实践&…

蓝桥杯-【二分】分巧克力,跳石头

代码及解析: #include<bits/stdc.h> using namespace std; int n,k; const int N100010; int h[N],w[N]; bool check(int d){int num0;for(int i0;i<n;i) num (h[i]/d)*(w[i]/d);if(num>k) return true; //够分else return false; //不够分 } in…

Golang教程一(环境搭建,变量,数据类型,数组切片map)

目录 一、环境搭建 1.windows安装 2.linux安装 3.开发工具 二、变量定义与输入输出 1.变量定义 2.全局变量与局部变量 3.定义多个变量 4.常量定义 5.命名规范 6.输出 7.输入 三、基本数据类型 1.整数型 2.浮点型 3.字符型 4.字符串类型 转义字符 多行字符…

深度学习简介

深度学习简介 一、引言&#xff1a;深度学习的兴起 简短介绍深度学习的历史背景 深度学习&#xff0c;作为人工智能领域的一颗冉冉升起的新星&#xff0c;其根源可以追溯到上世纪的感知机学习算法。这种算法模拟人类的神经元行为&#xff0c;是最早期的尝试之一。然而&#x…

OpenLayers6实战,OpenLayers实现鼠标拖拽方式绘制矩形(拖拽方式绘制长方形和正方形)

专栏目录: OpenLayers实战进阶专栏目录 前言 本章介绍使用OpenLayers在地图上实现鼠标拖拽方式绘制矩形(拖拽方式长方形和正方形)。 OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的,当然也包括长方形和正方形,但是这种多边形绘制出来的图形并不是准确的“…

Spring Boot中@Value注入静态变量

项目场景&#xff1a; Spring Boot中静态变量想使用Value注入值&#xff1a; 在application.properties或application.yml中定义topic名称&#xff1a; # application.properties test.name测试 Value("${test.name}") public static String name; 这时候打印发…

RocketMQ笔记(六)SpringBoot整合RocketMQ发送延迟消息

目录 一、简介1.1、延迟级别 二、Maven依赖三、application配置四、生产者4.1、同步发送延迟消息4.2、异步发送延迟消息 五、延迟级别修改5.1、 修改Broker端配置5.2、 通过Broker的运维命令修改5.3、 规则遵循 一、简介 在之前的文章中&#xff0c;我讲过了&#xff0c;同步发…

前端小白的学习之路(Vue2 四)

提示&#xff1a;学习vue2的第四天&#xff0c;笔记记录&#xff1a;混入(mixins),插槽(slot),过渡与动画(transition) 目录 一、混入(mixins) 二、插槽(solt) 1.匿名插槽 2.具名插槽 三、过渡与动画(transition) 1.过渡 1&#xff09;单元素过渡 Ⅰ.通用类名 Ⅱ.指定…

每天学点儿Python(6) -- 列表和枚举

列表是Python中内置的可变序列&#xff0c;类使用C/C中的数组&#xff0c;使用 [ ] 定义列表&#xff0c;列表中的元素与元素之间用英文逗号&#xff08; , &#xff09;分隔&#xff0c; 但是Python中列表可以存储任意类型的数据&#xff0c;且可以混存&#xff08;即类型可以…

图层、窗口、画布、视图

本文内容主要参考《Android图形显示系统》 图形显示系统会涉及到图层、窗口、画布和视图等概念&#xff0c;下面分别对它们进行简单介绍。 1&#xff09;图层&#xff1a;图层是SurfaceFlinger中的概念&#xff0c;使用Layer表示&#xff0c;SurfaceFlinger在合成最终显示的图…

项目管理-人情世故

综述&#xff1a;对于事业生活&#xff0c;人情世故我觉得在生活工作中比较重要&#xff0c;下面是我说的自己想法&#xff0c;有啥不对的&#xff0c;可以一起沟通确认。 事业上 总的来说&#xff0c;我们大多数为人情世故大家觉得没啥&#xff0c;实际上我觉得也挺重要的。…