Webpack学习记录

# Webpack 完整学习指南

## 一、Webpack 核心概念

### 1. 核心组成
- **Entry（入口）**：定义打包起点（单入口、多入口）。
- **Output（输出）**：指定打包文件的位置和命名规则。
- **Loader（加载器）**：处理非 JS 文件（如 CSS、图片、字体）。
- **Plugin（插件）**：扩展 Webpack 功能（如代码压缩、资源管理）。
- **Mode（模式）**：`development`（开发模式，保留调试）或 `production`（生产模式，优化代码）。
- **Module（模块）**：一切皆模块（JS、CSS、图片等）。
- **Bundle（包）**：最终生成的代码文件。

### 2. 核心流程
1. **解析入口文件** → 2. **构建依赖图** → 3. **递归处理模块** → 4. **生成打包文件**。

---

## 二、Webpack 配置详解

### 1. 基础配置模板
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',       // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.[contenthash].js',   // 文件名哈希
    clean: true,                // 清空旧文件
  },
  mode: 'production',           // 模式
  module: {
    rules: [                    // Loader 规则
      { 
        test: /\.css$/, 
        use: ['style-loader', 'css-loader'] 
      },
      { 
        test: /\.(png|svg|jpg)$/, 
        type: 'asset/resource'   // Webpack 5 资源处理
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }) // 生成 HTML
  ]
};

2. 高频配置参数

配置项	功能说明
devtool	生成 Source Map（eval-cheap-source-map 开发调试，source-map 生产环境）
devServer	开发服务器配置（port, hot, proxy）
resolve	模块解析规则（extensions, alias）
optimization	优化配置（代码分割 splitChunks, 压缩 minimize）
externals	排除外部依赖（如 CDN 引入的库）

 

三、核心功能点详解

1. Loader 与资源处理

• CSS 处理：css-loader（解析 CSS 依赖） + style-loader（注入样式到 DOM）。

• 预处理器：sass-loader（Sass/SCSS） + postcss-loader（自动添加浏览器前缀）。

• 图片/字体：type: 'asset/resource'（Webpack 5 原生支持，替代 file-loader）。

• Babel 转译：babel-loader + @babel/preset-env（兼容旧浏览器）。

2. 常用插件（Plugins）

插件	功能
HtmlWebpackPlugin	自动生成 HTML 并注入 Bundle
MiniCssExtractPlugin	提取 CSS 为独立文件（替代 style-loader）
CleanWebpackPlugin	打包前清理输出目录
CopyWebpackPlugin	复制静态资源（如图片、字体）到输出目录
DefinePlugin	定义全局常量（如 process.env.NODE_ENV）
BundleAnalyzerPlugin	可视化分析 Bundle 体积

3. 开发环境优化

• 热更新（HMR）：devServer: { hot: true }。

• 代理（Proxy）：解决跨域问题。

• Source Map：快速定位错误位置。

4. 生产环境优化

• 代码压缩：TerserWebpackPlugin（压缩 JS） + CssMinimizerPlugin（压缩 CSS）。

• Tree Shaking：删除未使用代码（需 ES Module 语法）。

• 代码分割（Code Splitting）：

• optimization: {
    splitChunks: {
      chunks: 'all', // 分割公共代码和第三方库
    }
  }

 

四、Webpack 高级特性

1. 自定义 Loader/Plugin

• Loader 开发：函数接收源码，返回处理后的内容。

• Plugin 开发：通过 apply 方法监听 Webpack 生命周期钩子。

2. 微前端与 Module Federation（Webpack 5）

// 模块提供方
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: { './Button': './src/Button.js' }
});

// 模块消费方
new ModuleFederationPlugin({
  remotes: { app1: 'app1@http://localhost:3001/remoteEntry.js' }
});

3. 性能优化

• 构建速度：

  • 缩小 Loader 作用范围（exclude: /node_modules/）。

  • 使用 cache-loader 或 Webpack 5 内置缓存（cache: { type: 'filesystem' }）。

• 输出体积：

  • 按需加载（import() 动态导入）。

  • 使用 webpack-bundle-analyzer 分析体积。

五、常见问题（QA）

1. 如何解决 Cannot find module 错误？

   • 检查 resolve.extensions 配置或路径是否正确。

2. 如何优化 Webpack 构建速度？

   • 使用 speed-measure-webpack-plugin 分析耗时步骤。

3. Webpack 4 和 5 的主要区别？

   • Webpack 5 内置资源处理（asset module）、持久化缓存、Module Federation。