webpack详解和实操

参考资料：看完这篇还搞不懂webpack，求你打我

一、webpack初步认识

Webpack 是一个现代前端模块打包器。

核心功能：

把前端资源都当作模块
- JS、CSS、图片、字体、JSON、甚至 TS、Vue 文件都可以视为模块。
- 每个模块可以有依赖（import / require）。
构建依赖图
- 从入口文件开始，Webpack 会递归分析所有依赖，形成"依赖图"。
输出打包文件
- 根据配置把所有模块打包成一个或多个文件（bundle），浏览器可以直接使用。

为什么要用Webpack？

在现代前端开发中，我们需要管理大量 JS、CSS、图片、字体和第三方库，Webpack 提供了一整套解决方案：

模块化管理

前端项目中模块越来越多，但是浏览器原生只支持 JS script标签，不支持模块化依赖。Webpack 可以把这些模块打包成一个或几个 JS 文件，保证浏览器可用。
支持非 JS 文件

在原生 JavaScript 里，原生 import 只能做一件事------引入 JS 模块。只能加载.js / .mjs，不能加载.css、.png、.vue、.ts。

Webpack 做了一件非常重要的事：

Webpack 在打包阶段"假装自己是 JS 解释器"，提前解析 import

Webpack 解析 import，不是浏览器解析。Webpack 看到"import './style.css'"后并不会说"这是非法 JS"，而是：
1. 发现这是一个依赖
2. 看文件后缀 .css
3. 去 module.rules 里找对应的 loader
4. 用 loader 把 CSS 转换成 JS
5. 把结果塞进 bundle
CSS、图片、字体、SVG、TS、甚至 Vue/React 文件都可以通过 Loader 转换成 JS 模块。这样前端可以用统一的 import 方式管理资源。
javascript 复制代码
```
import './style.css';
import logo from './logo.png';
```
性能优化

Webpack 内置或通过插件提供很多优化手段：
1. 代码拆分（Code Splitting）
  - 按需加载 JS，提高首屏速度。
2. Tree Shaking
  - 去掉没有使用的代码，减小包体积。
3. 压缩/哈希
  - JS/CSS 压缩，文件名加 hash，方便缓存。
开发体验增强
- 热更新（HMR）：修改 JS 或 CSS，浏览器自动刷新或替换模块。
- 开发服务器：webpack-dev-server 提供本地服务器，快速调试。
与框架结合

Vue、React、Angular 等现代框架通常都基于 Webpack 或类似打包工具：
- Vue CLI / Vite 内部就使用 Webpack（或 Rollup）进行打包。
- 统一管理依赖、资源、构建流程。

二、webpack基本概念

Webpack 的核心流程概览

入口 Entry

↓

模块解析 Module

↓

Loader 处理 → 转换非 JS 文件

↓

依赖图 Dependency Graph → 记录模块及依赖关系

↓

Plugins 插件处理 → 优化、生成 HTML、热更新

↓

输出 Output → 生成 bundle.js / 资源文件

Entry（入口）
- Webpack 从入口文件开始，比如：'./src/index.js'
- 入口文件就是整个应用的起点。
- Webpack 会根据入口分析依赖关系，开始递归查找所有模块。import 的 JS、CSS、图片等都是入口的依赖模块。
Module（模块化解析）
- Webpack 会把每个文件都看作模块。
- 解析模块时会分析依赖：
  bash 复制代码
```
import { add } from './math.js';
import './style.css';
```
  - JS、CSS、图片、TS、甚至 Vue 文件都会被转换成模块。
  核心：Webpack 构建依赖图（Dependency Graph）。
Loader（加载器/预处理）
- 默认情况下，Webpack 只能处理 JS。
- Loader 用来处理非 JS 文件或转换 JS：
  - babel-loader → ES6/TS 转 ES5
  - css-loader + style-loader → CSS
  - file-loader / url-loader → 图片、字体
- Loader 会把源文件 转换成 Webpack 能理解的模块。
  bash 复制代码
```
module: {
  rules: [
    { test: /\.css$/, use: ['style-loader','css-loader'] },
    { test: /\.ts$/, use: 'ts-loader' }
  ]
}	
```
Dependency Graph（依赖图构建）
- Webpack 会递归分析入口及其依赖，形成一张完整的 模块依赖图。
- 图中每个节点是一个模块，每条边是依赖关系。
- 通过这张图，Webpack 知道需要打包哪些模块，以及模块加载顺序。
Plugins（插件处理）
- 插件可以在打包流程的各个阶段发挥作用：
  - 优化输出（压缩 JS/CSS）
  - 注入 HTML
  - 热更新
  - 定义全局变量
- Loader 处理单个文件，Plugin 可以操作 整个打包过程或最终输出。
bash 复制代码
```
plugins: [
  new HtmlWebpackPlugin({ template: './src/index.html' }),
  new MiniCssExtractPlugin({ filename: 'style.css' })
]
```
Output（输出）
- 最后，Webpack 根据依赖图和配置，把所有模块打包成一个或多个 bundle 文件。
- 输出文件通常包括：
  - JS bundle
  - CSS bundle
  - 图片资源
  - HTML（如果用插件生成）
- 如果使用 webpack-dev-server，bundle 文件可能存在内存中而不是磁盘上。
  - 开发模式 → webpack-dev-server → bundle 在内存中
  - 生产模式 → 生成实际 bundle 到磁盘
bash 复制代码
```
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
}
```

三、webpack打包案例

方法一

创建webpack_demo1的文件夹作为项目文件，使用终端进入文件夹，使用npm init 命令初始化一个package.json文件

npm init 命令的作用

Node.js 包管理器（npm）的一个核心命令，用于初始化一个新的 Node.js 项目。主要是创建 package.json 文件 - 这是 Node.js 项目的配置文件，记录了项目的基本信息和依赖关系。

运行后，npm 会通过交互式问答的方式引导你填写项目信息：包名 (package name)、版本号 (version)、描述 (description)、入口文件 (entry point) - 通常是 index.js、测试命令 (test command)、Git 仓库 (git repository)、关键词 (keywords)、作者 (author)、许可证 (license)。

安装webpack。

可以去进行全局安装webpack，也可以本地项目webpack。这里推荐本地项目webpack。在现代前端环境里，全局安装 webpack 经常"不好用"。

npm install webpack webpack-cli --save-dev

解释：--save-dev 和 -D 是完全等价的。安装：webpack、webpack-cli，并把它们写进 devDependencies

npm install -D webpack webpack-cli webpack-dev-server

解释：devDependencies：只在开发 / 构建阶段使用。线上运行（部署到服务器）不需要。如果没有安装devDependencies，只能 webpack 打包。如果安装了devDependencies，可以 webpack serve / npm run dev。

创建项目文件

在webpack_demo文件夹下新建两个文件夹，分别为src文件夹和dist文件夹，接着在src文件夹下新增index.js文件和hello.js文件，在dist文件夹下新增index.html文件。

进行打包

npx webpack ./src/index.js --output-path dist --output-filename bundle.js --mode development

解释：使用 命令行配置进行打包。入口：./src/index.js。输出目录：dist。输出文件名：bundle.js。 --mode：打包模式。

mode	默认行为
`development`	不压缩、带调试信息
`production`	压缩、优化
`none`	什么都不做

用浏览器打开index.html文件。

补充：npm和npx的区别？

npm 管理依赖；npx 临时或就地执行依赖。
npm = Node Package Manager。它的核心职责：下载依赖，管理版本，写入 package.json。npm 本身不关心你怎么"运行"这些包。
npx = Node Package eXecute。执行一个 npm 包里的"可执行命令"。要注意npx 的执行优先级。
npm run 本质上内部也用了 npx 的那套查找机制。npm run xxx → 执行 scripts（内部用 .bin）。

方法二

在方法一是每次都在终端中输入的命令，接下来通过配置文件来使用webpack。

当前项目的根目录下新建一个配置文件webpack.config.js 。写下如下简单配置代码，目前只涉及入口配置（相当于我们的index.js，从它开始打包）和出口配置（相当于我们打包生成的bundle.js）。

方法三

Node项目一般都有一个package.json文件，该文件用于描述当前项目，其中有一个scripts属性，该属性可以自定义脚本命令，例如我们运行的打包命令，那么可以在scripts里添加自定义脚本为：

使用npm run build来运行该脚本命令。在这里添加每次都需要执行的命令，配置了scripts后， npm run key值相当于在终端运行了value值。npm run build = webpack。

四、构建本地服务器

上面案例通过打开本地HTML文件来查看页面的，vue，react框架时都是运行在本地服务器上的。

webpack-dev-server配置本地服务器

npm install webpack-dev-server -D
在webpack.config.js配置devServer
在package.json文件中添加启动命令
终端输入npm run dev 运行服务器

用dev来启动本地服务器， webpack-dev-server就是启动服务器的命令，- -opn是用于启动完服务器后自动打开浏览器，

这时候自定义命令方式的便捷性就体现出来了，可以多个命令集成在一起运行，即定义了一个dev命令名称就可以同时运行了webpack-dev-server和- -opn两个命令。