快速入门-Webpack

小巫编程室
133 阅读7分钟 
# 官网
<https://webpack.js.org/>
<https://www.webpackjs.com/>

# 源码
<https://github.com/webpack/webpack>

1. Webpack

Webpack 是一个模块打包工具，主要用于将项目中的所有资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，方便浏览器使用。Webpack 通过依赖关系图（Dependency Graph）分析模块之间的依赖，将项目的代码进行优化、压缩，并按需加载，提高应用的加载性能和开发效率。

通俗来说：比如有三个js文件：a.js 、b.js、c.js

c 中引用了 a 和 b 。webpack在打包 c.js 的时候会把 a 和 b 中的代码直接解析到 c 中，然后生成一个新的 js 文件。所以这个新文件就包含了a、b、c 的代码。从而减少了页面的请求。

当然 webpack 还提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大功能。

1.1 Webpack 背景

Webpack 的出现主要是为了解决前端开发中的模块化管理和构建问题，随着前端应用的复杂性不断增加，传统的开发和构建工具面临了多种挑战，Webpack 应运而生，提供了更加灵活和高效的解决方案。随着前端开发的快速发展，Web 应用的复杂度越来越高。以前的网站往往只是由 HTML、CSS 和少量 JavaScript 组成，但现代 Web 应用可能包含数百甚至上千个模块化的 JavaScript 文件、CSS 文件、图片、字体、图标等资源，这使得如何高效管理和打包这些文件变得尤为重要。

在前端开发中，模块化可以使代码更加结构化和可维护。以前，开发者通过

传统工具如 Grunt 和 Gulp 主要用于自动化构建任务（如文件合并、压缩、预处理等），但它们对模块化的支持有限，无法解决模块依赖管理的问题。Webpack 可以通过构建依赖关系图（Dependency Graph），自动分析项目中各个模块之间的依赖关系，并按需打包。这样，开发者可以专注于代码开发，而无需手动管理文件依赖。现代 Web 应用为了提升用户体验，往往需要对资源进行性能优化。Webpack 提供了代码分割（Code Splitting）和懒加载（Lazy Loading）功能，允许开发者将应用的代码按需加载，而不是一次性加载所有资源。这不仅减小了初始页面的体积，也提高了用户的交互速度。为了适应复杂的项目需求，Webpack 引入了插件（Plugins）和加载器（Loaders）的概念。插件允许开发者扩展和定制 Webpack 的打包过程，如代码压缩、资源注入等。加载器则用于处理非 JavaScript 的静态资源（如 CSS、图片、字体等）。这种插件和加载器的机制极大地扩展了 Webpack 的功能，增强了其灵活性和可扩展性。

核心功能：

  • 模块化打包：将代码模块化处理，支持 JavaScript、CSS、图片等文件。
  • 依赖管理：分析模块之间的依赖关系，自动引入和加载。
  • 按需加载：支持代码分割，按需加载资源，优化应用性能。
  • 插件系统：提供丰富的插件机制，扩展打包流程，如压缩、代码热替换等。
  • 开发服务器：支持本地开发时的实时重载功能，提升开发效率。

2. Webpack 学习

2.1 快速实践

下面是一个简单的 Webpack 使用案例，帮助你快速上手。我们将使用 Webpack 来打包一个包含 HTML、CSS 和 JavaScript 文件的小项目。（首先必须得先安装 node.js）

1. 安装 Webpack

# 1.创建一个项目文件夹并进入该文件夹

	mkdir my-webpack-app
	cd my-webpack-app

# 2.初始化 package.json 文件

	npm init -y
	
# 3.安装 Webpack 和 Webpack CLI

	npm install --save-dev webpack webpack-cli

2.项目结构

# 在文件夹下构建项目结构
	
	my-webpack-app/
	├── dist/                 # 打包后的文件会放在这里
	├── src/                  # 源代码文件夹
	│   ├── index.js          # 入口 JavaScript 文件
	│   └── style.css         # 样式文件
	├── index.html            # HTML 文件
	├── webpack.config.js     # Webpack 配置文件
	└── package.json

3.编写源代码

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpack App</title>
</head>
<body>
    <h1>Hello Webpack!</h1>
    <script src="main.js"></script>
</body>
</html>

src/index.js 文件

console.log('Hello Webpack! This is from JavaScript.');

4.配置 Webpack

webpack.config.js 文件在根目录下创建 webpack.config.js 文件，添加以下内容

const path = require('path');

module.exports = {
    entry: './src/index.js',    // 入口文件
    output: {
        filename: 'main.js',    // 打包后的文件名
        path: path.resolve(__dirname, 'dist')  // 输出文件夹
    },
    module: {
        rules: [
            {
                test: /\.css$/,   // 处理 CSS 文件
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    mode: 'development'          // 模式，development 适合开发，production 适合生产环境
};

5.打包代码

在 package.json 文件中添加一个 build 脚本，方便打包：

{
  "scripts": {
    "build": "webpack"
  }
}

// 执行打包命令
npm run build

Webpack 会在 dist/ 文件夹中生成一个 main.js 文件，并可以通过 index.html 文件加载打包后的 JavaScript 和 CSS。

2.2. Webpack 详解

核心概念：入口(entry)、输出(output)、加载器（loader）、插件(plugins)

  • entry 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始,可以是单入口也可以是多入口

  • output 用来配置编译后的文件存储位置和文件名,只能有一个出口

    • output中有path选项用来存放打包后文件的输出目录，必填
    • filename用于指定输出文件的名称
    • publicePath指定文件引用的目录

  • loader 对模块源代码进行转换 (webpack 本身只能处理Js模块)

  • plugins：可以用来解决loader无法实现的其他事。外置插件要先npm安装，然后导入插件用require()

extract-text-webpack-plugin 插件可以把散落在各地的css提取出来，并合成一个文件

流程图

graph LR
    A[初始化配置] --> B[构建依赖图]
    B --> C[处理模块]
    C --> D[输出结果]

2.3 总结

Webpack 是当今前端领域最流行的打包工具之一，尤其在 React、Vue、Angular 等框架中被广泛使用。根据 GitHub Star 数和 npm 下载量来看，它的市场占有率极高，是多数企业和开源项目的首选工具。

特性WebpackParcelRollupVite
优点功能强大，生态完善，支持模块化开发、代码分割等，适合大型复杂项目零配置，开箱即用，支持热更新，开发体验好输出代码体积小，适合打包 JS 库，支持 ES 模块启动速度极快，基于 ES Module，支持即时热更新
缺点配置复杂，学习曲线陡，早期版本打包速度较慢功能不如 Webpack 完善，适合小型项目功能较少，主要用于 JS 库打包，不支持非 JS 文件插件生态和成熟度相对 Webpack 还有待发展
应用场景大型单页应用、多种资源类型混合项目小型和中型项目，快速原型开发适合 JS 库的打包适合现代前端框架开发（Vue、React），注重开发速度
代码分割完全支持，灵活强大支持基本的代码分割不支持支持，基于现代的 ESM 机制
热更新支持（需要配置）内置支持不支持原生支持

  • Webpack 更适合大型复杂的前端项目，功能全面且灵活，虽然学习曲线较陡，但其丰富的插件系统和社区支持使其成为市场主流。

  • Parcel 以零配置和开发体验为主打，适合快速开发和小型项目。

  • Rollup 专注于 JavaScript 库的打包，输出文件体积小，适合需要极致优化的库打包场景。

  • Vite 则是专为现代开发工具链设计，适合 Vue、React 等框架，具有极快的开发速度和原生支持 ES 模块。

更多内容欢迎关注 [ 小巫编程室 ] 公众号，喜欢文章的话，也希望能给小编点个赞或者转发，你们的喜欢与支持是小编最大的鼓励，小巫编程室感谢您的关注与支持。好好学习，天天向上(good good study day day up)。

avatar
文章
阅读
粉丝