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

相关推荐
明月清风徐徐29 分钟前
Vue实训---2-路由搭建
前端·javascript·vue.js
王解37 分钟前
速度革命：esbuild如何改变前端构建游戏 (1)
前端·vite·esbuild
葡萄城技术团队1 小时前
使用 前端技术 创建 QR 码生成器 API1
前端
DN金猿1 小时前
Vue移动端网页（H5）预览pdf文件（pdfh5和vue-pdf）（很详细）
前端·vue.js·pdf
鸽鸽程序猿1 小时前
【前端】javaScript
开发语言·前端·javascript
秦时明月之君临天下1 小时前
React和Next.js的相关内容
前端·javascript·react.js
上官花雨2 小时前
什么是axios？怎么使用axios封装Ajax？
前端·ajax·okhttp
米奇妙妙wuu2 小时前
React中 setState 是同步的还是异步的？调和阶段 setState 干了什么？
前端·javascript·react.js
李刚大人2 小时前
react-amap海量点优化
前端·react.js·前端框架
闹闹没有闹2 小时前
socket连接封装
前端
热门推荐
01【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07逆向微博热搜时光机(js逆向)08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇