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

叫我DPT2024-03-16 17:44

文章目录

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文件作为测试，

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作为依赖，

js 复制代码 
// src/data.js
export function getList{
	return ['冠军','亚军','季军'];
}
js 复制代码 
// src/index.js
const { getList } = require("./data");

console.log(getList());

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

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 的大小要小于开发模式下。

现在来简单的配置一下：

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
	},
}

现在再次打包运行一下，会根据配置生成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文件
css 复制代码 
ul{
	background-color: blueviolet;
	font-size: 10px;
}

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

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

图片等静态文件的加载

  1. 配置webpack.config.js
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.导入图片

js 复制代码 
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

  2. 配置webpack.config.js

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一起进步吧。

相关推荐
喵叔哟33 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些，D3的优势，D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略（1）
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览，而是下载文件？
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建（module）
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS（跨域资源共享）：原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model（详细图文注释）
前端·javascript·vue.js
Mr.咕咕2 小时前
Django 搭建数据管理web——商品管理
前端·python·django
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08文件或文件夹名称中有空格如何批量去除09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能