导航

前言

简介

webpack 是基于 Node.js 开发出来的一个前端项目静态资源打包工具。

它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件，就可以在浏览器端运行了。

为什么要使用 Webpack

一句话概括：实现项目工程的自动化
分析：
- 本地版本（方便维护）：
  - html，js，css 分离
  - 模块化
  - es6
  - sass
- 线上版本（Webpack 打包）：
  - 高性能
  - 体积小
  - 速度快

几个基本概念

Module（模块）

你写的源代码文件（如 .js、.css、.html 等）都是模块。每个文件都是一个独立的模块，Webpack 会根据文件的依赖关系（例如 import 或 require）将它们连接起来。

Chunk（块）

Webpack 会根据项目的依赖关系和配置（比如代码分割），将多个模块分成一个或多个 chunk。一个 chunk 是 Webpack 为了优化加载而生成的代码块，可以包含多个模块。例如，Webpack 会将共享依赖提取到一个 chunk 中，或者将懒加载的代码分成单独的 chunk。

Bundle（包）

最终，Webpack 会将 chunk 生成文件，称为 bundle。这些文件是浏览器能够加载并执行的最终文件。例如，bundle.js 就是一个包含了 Webpack 打包后代码的文件，通常是一个压缩过的 JavaScript 文件。

通俗解释

模块（Module）：我们写的源代码文件。
块（Chunk）：Webpack 根据文件依赖生成的逻辑块，可能包含多个模块。
包（Bundle）：Webpack 将 chunk 文件打包成浏览器能直接执行的文件，通常是 .js、.css 等格式。

总结

你写的是模块（Module），Webpack 根据依赖关系处理生成 chunk，最后打包成浏览器可以执行的 bundle 文件。

开始

初始化项目

找个地儿新建个文件夹，例如 webpack5

初始化 `package.json`

打开终端， cd 到项目根目录，执行：

npm init -y

此时会生成一个基础的 package.json 文件。

下载依赖

 npm i webpack webpack-cli -D

此刻 package.json 示例如下：

{
  "name": "webpack5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  }
}

创建初始文件

初始文件结构如下：

.
├── package-lock.json
├── package.json
├── node_modules
└── src
    ├── js
    │   ├── count.js
    │   └── sum.js
    └── main.js

count.js

 export default function count(x, y) {
  return x - y;
}

sum.js

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

main.js

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

启用 webpack

开发模式

npx webpack ./src/main.js --mode=development

生产模式

npx webpack ./src/main.js --mode=production

说明

npx webpack: 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包，不但会打包 main.js，还会将其依赖也一起打包进来。
--mode=xxx：指定模式（环境）。

观察输出文件变化

通过上边任意一种模式打包后，你的项目会出现一个 dist 文件夹，里边有个 main.js

.
**├── dist
│   └── main.js**
├── package-lock.json
├── package.json
└── src
    ├── js
    │   ├── count.js
    │   └── sum.js
    └── main.js

执行

在终端当前项目根目录执行下面命令输出 1 和 10

node dist/main.js

# log
1
10

小结

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。

所以我们还得学习如何处理其他资源。

基本配置

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

5 大核心概念

entry（入口）
output（输出）
loader（加载器）
plugins（插件）
mode（模式）

loader vs plugin

plugin 可以在 webpack 运行到某个时刻的时候，帮你做一些事情。可以联想 vue，react 框架的页面生命周期，不同的插件会在不同的“时刻”帮你做不同的事情。和 loader 的区别重点在 plugin 侧重于「某个时刻」，loader 侧重于「某类文件」。

准备 Webpack 配置文件

在项目根目录下新建文件：webpack.config.js

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范。

修改配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，**必须是绝对路径**
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

前言

简介