# webpack-learn

**Repository Path**: migangxiaozi/webpack-learn

## Basic Information

- **Project Name**: webpack-learn
- **Description**: webpack学习记录
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-19
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!-- filepath: d:\Aproject\gitee\node20.9.0\testwebpack\README.md -->
# Webpack 学习总结

## 为什么要用 Webpack?

- 前端开发中,JS、CSS、图片等资源越来越多,容易出现**命名冲突**、**体积增大**等问题。
- 传统方式管理依赖不方便,难以模块化开发。
- Webpack 可以把各种资源打包成静态文件,自动处理依赖和优化体积。

## 模块化开发的演变

- **Node.js** 时代有 `require`,可以把 JS 拆成多个模块,方便维护。
- 借助 **npm**,可以方便地管理第三方依赖。
- **ES6** 标准推出了 `import` 和 `export`,让 JS 原生支持模块化。

## Webpack 的核心原理

- Webpack 会自动分析代码里的 `import` 和 `export`,把所有依赖的资源打包到一起。
- 打包过程中可以用各种**插件**和**加载器**(Loader)做处理,比如压缩、转译、自动生成 HTML 等。

## 常用 Loader 和 Plugin

- `use: ['style-loader', 'css-loader']`  
  这是 CSS 的加载器。`css-loader` 让 JS 能识别 CSS 文件,`style-loader` 把 CSS 插入到页面 `<style>` 标签里。
  ```js
  // webpack.config.js 片段
  module.exports = {
    // ...existing code...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
    // ...existing code...
  }
  ```

- **Babel Loader**  
  `babel-loader` 配合 `@babel/core` 和 `@babel/preset-env`,可以把新版本的 JS(比如 ES6)翻译成老版本的 JS,兼容更多浏览器。
  ```js
  // webpack.config.js 片段
  module.exports = {
    // ...existing code...
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
    // ...existing code...
  }
  ```

- **HtmlWebpackPlugin**  
  这是一个插件,可以自动生成 HTML 文件,并把打包后的 JS、CSS 自动插入到 `<script>` 和 `<link>` 标签里,不用手动写。
  ```js
  // webpack.config.js 片段
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
    // ...existing code...
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ]
    // ...existing code...
  }
  ```

- **TerserWebpackPlugin**  
  这是一个压缩插件,可以把 JS 代码压缩,减少体积,让页面加载更快。
  ```js
  // webpack.config.js 片段
  const TerserWebpackPlugin = require('terser-webpack-plugin');
  module.exports = {
    // ...existing code...
    optimization: {
      minimize: true,
      minimizer: [new TerserWebpackPlugin()]
    }
    // ...existing code...
  }
  ```

- **MiniCssExtractPlugin**  
  这是一个 CSS 提取插件,可以把 CSS 代码从打包后的 JS 中抽离出来,生成单独的 CSS 文件。好处是:
  - 减少 JS 文件体积,加快页面加载速度
  - CSS 可以单独缓存,提高性能
  - 支持并行加载 CSS 和 JS
  ```js
  // webpack.config.js 片段
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  module.exports = {
    // ...existing code...
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
      })
    ],
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
        }
      ]
    }
    // ...existing code...
  }
  ```

## Tree-shaking(树摇优化)

Tree-shaking 是 Webpack 的一个重要优化功能,可以自动移除未被使用的代码:

- **原理**: 分析 ES6 的 `import` 和 `export`,找出哪些导出的代码没有被使用,然后在打包时删除这些"死代码"。
- **自动启用**: 当 `mode` 设置为 `production` 时,Webpack 会自动开启 Tree-shaking。
- **使用条件**:
  - 必须使用 ES6 模块语法(`import`/`export`)
  - 不能使用 CommonJS 语法(`require`/`module.exports`)
  - 确保 babel 配置不会把 ES6 模块转成 CommonJS

```js
// webpack.config.js 片段
module.exports = {
  mode: 'production',  // 自动启用 Tree-shaking
  // ...existing code...
}
```

```js
// .babelrc 或 babel.config.js - 保持 ES6 模块
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false  // 不转换模块语法,保留 ES6 模块
    }]
  ]
}
```

**Tree-shaking 示例**:
```js
// utils.js - 导出多个函数
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }

// index.js - 只使用了 add 函数
import { add } from './utils';
console.log(add(1, 2));

// 打包结果: subtract 和 multiply 会被自动删除
```

## 项目结构举例

```
src/
  ├── asset/        # 图片等静态资源
  ├── data.js       # 数据模块
  ├── index.js      # 入口 JS 文件
  ├── style.css     # 样式文件
  └── index.html    # HTML 模板
build/              # 打包输出目录
webpack.config.js   # Webpack 配置文件
package.json        # 项目依赖和脚本
.gitignore          # Git 忽略文件
```

## 打包流程简述

1. 在 `index.js` 里用 `import` 引入各种资源和模块。
2. Webpack 根据配置,自动分析依赖,把所有 JS、CSS、图片等打包到 `build/` 目录。
3. 用 `HtmlWebpackPlugin` 自动生成 HTML 文件,并注入打包后的资源。
4. 用 `babel-loader` 让新语法的 JS 兼容老浏览器。
5. 用 `terser-webpack-plugin` 压缩 JS,优化体积。
6. 用 `MiniCssExtractPlugin` 把 CSS 提取成单独文件,提高加载性能。
7. 在 `production` 模式下自动启用 Tree-shaking,删除未使用的代码。

## 性能优化总结

| 优化方式 | 作用 | 启用条件 |
|---------|------|---------|
| Tree-shaking | 删除未使用的导出代码 | `mode: 'production'` 自动启用 |
| TerserPlugin | 压缩混淆 JS 代码 | 手动配置或 production 模式 |
| MiniCssExtractPlugin | 提取独立 CSS 文件 | 手动配置 |
| Code Splitting | 代码分割,按需加载 | 配置 optimization.splitChunks |

## 总结

Webpack 让前端开发更高效、更规范,自动处理各种资源和依赖,适合现代项目开发。  
通过 Loader 和 Plugin,可以灵活扩展各种功能,解决实际开发中的各种问题。  
合理使用 Tree-shaking 和 MiniCssExtractPlugin 等优化手段,可以显著减少打包体积,提升页面性能。

---

> 以上内容结合实际项目和学习过程整理,适合初学者理解和参考。