webpack：新手必看的webpack教程！！！

最新推荐文章于 2024-06-02 21:27:33 发布
最新推荐文章于 2024-06-02 21:27:33 发布
阅读量1.3k 收藏 26
点赞数 44
文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66925868/article/details/136758356
版权

文章目录

webpack

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

几个基础概念

首先要先了解几个概念：

  • 模块：模块是构建应用程序的基本单元。它们可以是 JavaScript 文件、CSS 文件、图片或其他任何类型的资源。
  • chunk：Webpack 将模块分组成 chunks。一个 chunk 是一组模块和它们的依赖，它们可以一起被加载。Chunks 可以是入口点的初始 chunk，也可以是按需加载的异步 chunk。这种分组方式有助于代码拆分，从而优化应用程序的加载性能。
  • bundle：最终，Webpack 将这些 chunks 转换成一个或多个 bundle。一个 bundle 是一种打包后的文件，它包含了运行应用程序所需的所有模块和资源。Webpack 可以输出不同格式的 bundle，以适应不同的环境和需求，例如单页面应用程序的全局 bundle 或多页面应用程序的多个入口点对应的多个 bundle。
  • 树结构：Webpack 内部构建了一个依赖图，这是一个树状结构，用于表示模块之间的依赖关系。树的根是入口文件，从那里开始，Webpack 递归地追踪所有导入的模块，形成一个完整的依赖图。

如图：就是一个webpack树结构，从index这个文件为入口开始，Webpack 递归地追踪所有导入的模块（），形成一个完整的依赖图。然后又会对模块进行分组成为chunks，最后经过webpack的转换，输出了不同格式的bundle。

在这里插入图片描述

在这里插入图片描述

webpack是一个基于node.js的框架，使用之前要确保已经安装。

安装webpack

npm i webpack -g

npm i webpack-cli -g

运行 npm i webpack -g 全局安装Webpack，安装到全局可以在任何地方共用一个Webpack可执行文件，而不用各个项目重复安装。如果是 webpack4.0 以上的版本，需要运行 npm i webpack -g 全局安装 Webpack-cli。

webpack -v  #验证

webpack简单体验一下

  1. 创建一个新的文件夹存放项目文件

  2. 初始化 npm，在项目文件夹中，初始化一个新的 npm 项目，并创建一个 package.json 文件。

npm init -y

在这里插入图片描述

  1. 创建源文件，在你的项目根目录下，创建一个名为 src 的文件夹，并在其中创建一个 index.js 文件。这将是你的 JavaScript 入口文件，在 index.js 文件中，添加一些示例代码：
    // src/index.js
    console.log('Hello, Webpack!');

创建一个index.html文件作为测试，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>webpack_demo</title>
	</head>
	<body>
		<h1>hello,Webpack!</h1>
		<script src="./src/index.js"></script>
	</body>
</html>
  1. 执行打包命令
npx webpack

会生成dist文件及dist/main.js

  1. 将index.html的index.js的引用改成main.js的引用

运行后的效果与之前一致。这都是在没有依赖的情况下的打包。

接着看一个有依赖情况下的打包例子：

在上述例子的基础上，新建一个data.js作为依赖，

// src/data.js
export function getList{
	return ['冠军','亚军','季军'];
}

// src/index.js
const { getList } = require("./data");

console.log(getList());

然后再次打包，此时生成的mian.js就不太一样了，

// dist/main.js
(()=>{var e={802:(e,t,r)=>{"use strict";function o(){return["冠军","亚军","季军"]}r.r(t),r.d(t,{getList:()=>o})}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{const{getList:e}=r(802);console.log(e())})()})();

此时将创建的这个bundle文件引入index.html文件，即可查看到结果。

在这里插入图片描述

webpack的核心——配置文件

默认是webpack.config.js，这个配置文件包含了 Webpack 需要知道的所有信息：

  • 入口(entry)：entry 是指 webpack 应该从哪里开始以什么为起点，来作为构建其内部 依赖图 的开始。

  • 输出(output)：output 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

  • 加载器(loader)：Webpack 本身只能处理 JavaScript 和 JSON 文件， Loaders 可以将所有类型的文件转换为 Webpack 能够处理的有效模块，从而可以在你的应用程序中使用这些文件。

  • 插件(plugin)：loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量，用来增强和定制 Webpack 构建流程的功能。

  • 模式(mode))：Webpack 允许你为不同的环境设置不同的模式，如 development（开发）或 production（生产）。不同的模式会影响 Webpack 的构建行为，例如，在生产模式下 bundle 的大小要小于开发模式下。

现在来简单的配置一下：

const path = require("path")

module.exports = {
	mode:"development",
	entry:"./src/index.js",
	output:{
		filename:"dist.js",
		path: path.resolve(__dirname, "dist"),
		// path.resolve方法会解析一个路径字符串，使其指向一个绝对路径。
		// __dirname 是一个全局变量，它返回根目录的绝对路径
		// 这个方法会根据给定的一系列路径或路径片段，解析出最终的绝对路径。
		// 所以最后bundle文件会生成在 根目录/dist/dist.js
	},
}

现在再次打包运行一下，会根据配置生成bundle文件。

css文件的加载

前面说了，Webpack 本身只能处理 JavaScript 和 JSON 文件，那么要处理css文件就要使用loader了。

  1. 下载依赖

    npm add --dev style-loader css-loader

    –dev 表示 把依赖安装到开发者依赖里，因为在打包后都不需要这些依赖了

  2. 配置

module.rules数组中添加一个对象。每个对象描述了哪些文件应该被哪个 loader 处理，以及如何处理它们。

const path = require("path")

module.exports = {
	mode:"development",
	entry:"./src/index.js",
	output:{
		filename:"dist.js",
		path: path.resolve(__dirname, "dist"),
		// path.resolve方法会解析一个路径字符串，使其指向一个绝对路径。
		// __dirname 是一个全局变量，它返回根目录的绝对路径
		// 这个方法会根据给定的一系列路径或路径片段，解析出最终的绝对路径。
		// 所以最后bundle文件会生成在 根目录/dist/dist.js
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
			},
		],
	}
}
  1. 添加css文件
ul{
	background-color: blueviolet;
	font-size: 10px;
}

li{
	color: red;
	font-size: 20px;
}

然后import到index.js文件中，之后打包运行：

在这里插入图片描述

图片等静态文件的加载

  1. 配置webpack.config.js
const path = require("path")

module.exports = {
	mode:"development",
	entry:"./src/index.js",
	output:{
		filename:"dist.js",
		path: path.resolve(__dirname, "dist"),
		// path.resolve方法会解析一个路径字符串，使其指向一个绝对路径。
		// __dirname 是一个全局变量，它返回根目录的绝对路径
		// 这个方法会根据给定的一系列路径或路径片段，解析出最终的绝对路径。
		// 所以最后bundle文件会生成在 根目录/dist/dist.js
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
			},{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: "asset/resource",
			},
		],
	}
}

2.导入图片

import "./style.css";
import carImage from "./assets/images/car.png"  // 导入一个图片文件并将其作为一个模块的默认导出赋值给变量 car。
const { getList } = require("./data");


const rank = getList();
const ul = document.createElement("ul");
rank.forEach(rankItem => {
	const li = document.createElement("li")
	li.innerText = rankItem;
	ul.appendChild(li);
});
document.body.appendChild(ul);

const image = document.createElement("img");
image.src = carImage;
document.body.appendChild(image);

import car from “./assets/images/car.png”，是告诉 Webpack ：

  1. 找到 ./assets/images/car.png 这个文件
  2. 使用配置的 loader 处理这个图片文件。
  3. 将处理后的结果作为默认导出。
  4. 创建一个变量 car 并将默认导出的值赋给它。

然后import到index.js文件中，之后打包运行：

在这里插入图片描述

自动生成html的插件

html-webpack-plugin插件可以自动编写index.html的代码，就不需要手动编写添加dist.js了。

  1. 安装
npm add html-webpack-plugin --dev
  1. 配置webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
	mode:"development",
	entry:"./src/index.js",
	output:{
		filename:"dist.js",
		path: path.resolve(__dirname, "dist"),
		// path.resolve方法会解析一个路径字符串，使其指向一个绝对路径。
		// __dirname 是一个全局变量，它返回根目录的绝对路径
		// 这个方法会根据给定的一系列路径或路径片段，解析出最终的绝对路径。
		// 所以最后bundle文件会生成在 根目录/dist/dist.js
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: ["style-loader", "css-loader"],
			},{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: "asset/resource",
			},
		],
	},
	plugins: [new HtmlWebpackPlugin({
		title: "排名"
	})]
}

现在运行打包后会在dist目录下自动生成一个index.html文件，运行效果与之前的效果一样。

本人也处于学习阶段，若有错误与不足请指出，关注DPT一起进步吧。

叫我DPT
关注
  • 44
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
webpack教程
02-14
webpack教程
webpack教程.zip
12-24
webpack教程.zip webpack是现在最流行的前端自动化打包工具 模块中还是用的AMD规范，但我并没有引入 requirejs 源码，因为首先 webpack 原生支持了 CommonJs 、AMD 等模块风格，编译时会自动识别进行处理
前端工程化精讲第十课 流程分解：Webpack 的完整构建流程
fegus的博客
08-28 639
这一课时起，我们进入了 Webpack 构建优化的主题。在这节课中，我主要为你勾画了一个 Webpack 工作流程的轮廓，通过对三个源码文件的分析，让你对执行构建命令后的内部流程有一个基本概念。然后我们讨论了 Compiler 和 Compilation 工作流程中的生命周期 Hooks，以及插件的基本工作方式。最后，我们编写了一个简单的统计插件，用于实践上面所讲的课程内容。今天的课后思考题是：在今天介绍的 Compiler 和 Compilation 的各生命周期阶段里，通常耗时最长的分别是哪个阶段呢。.
前端工程化之：webpack1-6(编译过程)
m0_60189088的博客
01-26 1588
初始化时我们运行的命令 webpack 为核心包， webpack-cli 提供了 webpack 命令，通过命令启动 webpack ，webpack 命令就是在调用核心包里面的功能。
webpack-exploration:探索Webpack配置
05-18
探索Webpack配置 ... 我是Webpack的新手，这很艰难。 我读过的大多数文章都是过时的，或者完全是疯狂的，将读者带入混乱之中，然后为他们提供创可贴来弥补伤口，这些都是第三方加载器和插件，看起来不太像功能
新手快速上手webpack4打包工具的使用详解
10-17
主要介绍了新手快速上手webpack4打包工具的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于webpack2和模块打包的新手指南（小结）
12-08
webpack已成为现代Web开发中最重要的工具之一。它是一个用于JavaScript的模块打包工具，但是它也可以转换所有的前端资源，例如HTML和CSS，甚至是图片。它可以让你更好地控制应用程序所产生的HTTP请求数量、允许你...
使用webpack搭建vue项目及注意事项
12-11
有一句话叫“前人栽树后人乘凉”，还有一句话叫“如果说我看得比别人更远些，那是因为我站在巨人的肩膀上”。前一句是国人的俗语，后一句是那个发现了“万有引力”定律的牛顿说的。为什么要引用这两句呢？是因为我刚...
Webpack性能调优：从加载器到插件的全面优化
天涯学馆
05-27 1315
根据项目需求定制的配置，例如开启热模块替换 (HMR)、调整代理设置等。
webpack如何实现懒加载
codedadi的博客
05-27 651
Webpack实现懒加载主要通过代码分割（Code Splitting）技术，它允许将代码拆分成多个bundle，然后根据需要动态加载这些bundle。Webpack通过异步加载的方式实现懒加载，将代码分割成多个小的bundle，然后在运行时根据需要动态加载这些bundle。懒加载（或称为按需加载）是一种优化策略，它允许在需要时加载JavaScript代码，而不是在初始页面加载时加载所有代码。例如，在Vue Router中，可以使用动态导入来配置懒加载的路由组件。
vue的module、chunk、bundle分别是什么意思有何区别
codemami的博客
05-27 652
在Vue中，特别是与Webpack或其他模块打包器一起使用时，module通常指的是一个离散的功能块，它可以是任何可以被导入（import）或导出（export）的文件。这些文件可以是JavaScript、CSS、图片等，但在Vue和Webpack的上下文中，它们主要指的是包含Vue组件、库、工具函数等的JavaScript文件。bundle是Webpack打包后的最终输出结果，它是一个或多个chunks的集合，包含了应用程序运行所需的所有代码和资源。通常是多个模块的组合，代表了最终打包结果中的一部分。
[Cesium学习]
警警的博客
05-27 196
指的是在使用webpack打包项目时，less-loader插件在执行时遇到了一个问题: this.getOptions方法不存在。webpack与less-loader版本对应问题。Cesium中比例尺设置。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 492
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 491
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 573
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
【JS实战案例汇总——不定时更新版】
微木
05-30 324
练习JS的实用案例，倒计时算法、定时轮播图
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 930
Web前端三大主流框架介绍：Angular、React、Vue
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
smileKH的博客
05-28 524
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
web刷题记录（1）
2301_81841047的博客
05-29 1240
这道sql题，我是用sql-map做出来的，所以这里展示用sql-map的做法，老样子，进入发现有参数的传入口，传参以后，用bp抓包，将抓包内容的文件复制到kali里面，使用sql-map的命令进行检查，因为不确定是哪一种注入形式，所以这里采用五级三风险，发现是时间盲注和报错注入，而且爆出了一个库。这里我考虑了取反来进行绕过，但是发现没有回显。但是，直接构造payload发现，还是被拦截了，也不知道是什么被过滤了，再次查看，发现是flag文件的连接的“al”被过滤了，所以，这里再次使用转义符，进行绕过。
能匹配webpack:///bb/aaa或webpack:///bbb或webpack:///ccc或webpack:///node_modules但是不能匹配webpack:///src
05-12
我可以给你一个简单的正则表达式，可以匹配这些字符串，但不能匹配以webpack:///src开头的字符串： ``` ^webpack:\/\/\/(bb\/aaa|bbb|ccc|node_modules)(?!\/src) ``` 这个正则表达式的意思是： - `^webpack:\/\/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叫我DPT

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值