本文介绍了Webpack的基本概念和使用方法，包括为何需要打包工具、为何选择Webpack，以及如何解决作用域、代码拆分和浏览器模块支持等问题。通过Webpack，开发者可以将各种前端资源打包成静态资源bundle，支持ES6模块、CSS预处理器等。文章还涵盖了Webpack的基础使用，包括安装、配置、资源目录管理、source map和watch模式。最后，详细阐述了Webpack的核心概念，如Entry入口、Output输出、Loader解析器、Plugins插件和Mode模式，帮助读者全面理解Webpack的工作原理和配置技巧。
1.前言
1.1 概述
官网的描述：
本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个静态资源(bundle)。
转换成自己的话：
- webpack 是前端的一个资源构建工具，一个静态模块打包器；
- 在 webpack 看来，前端的所有资源文件(js/json/css/less/scss/img…)都是一个个模块；
- webpack 会根据资源的依赖关系生成一个依赖关系图，再打包成对应的静态资源bundle。
1.2 为什么需要打包工具？
开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。
所以我们需要打包工具帮我们做完这些事。
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。
1.3 为什么需要 Webpack
想要理解为什么要使用 webpack，我们先回顾下历史，在打包工具出现之前，我们 是如何在 web 中使用 JavaScript 的。在浏览器中运行 JavaScript 有两种方法：
第一种方式，引用一些脚本来存放每个功能，比如下面这个文档：
01-why-webpack/index-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>千锋大前端教研院-Webpack5学习指南</title>
</head>
<body>
<!-- HTML 代码 -->
<div>我的HTML代码</div>
<!-- 引入外部的 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<!-- 引入我自己的 JavaScript 文件 -->
<script src="./scripts/common.js"></script>
<script src="./scripts/user.js"></script>
<script src="./scripts/authentication.js"></script>
<script src="./scripts/product.js"></script>
<script src="./scripts/ .js"></script>
<script src="./scripts/payment.js"></script>
<script src="./scripts/checkout.js"></script>
<script src="./scripts/shipping.js"></script>
</body>
</html>
此解决方案很难扩展，因为加载太多脚本会导致网络瓶颈。同时如果你不小心更改了JavaScript文件的加载顺序，这个项目可能要崩溃。
第二种方式，使用一个包含所有项目代码的大型 .js 文件, 对上面的文档做改进：
01-why-webpack/index-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
最低0.47元/天 解锁文章
扫一扫
3215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
