Webpack 是一款模块打包工具，能够将 JavaScript 模块进行静态资源管理、代码分割和打包优化。以下是核心知识点速览：

1. 基础概念

  • 模块化：将代码拆分为独立模块，通过 import/export 管理依赖
  • 打包流程：从入口文件开始，递归解析依赖，生成静态资源文件
  • Loader：转换文件的规则（如 TypeScript、CSS、图片等）
  • Plugin：扩展功能的机制（如热更新、代码压缩等）
webpack_logo

2. 安装与初始化

npm install --save-dev webpack webpack-cli

创建 webpack.config.js 配置文件，基本结构如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

3. 常用功能

  • 代码分割：使用 splitChunks 实现多入口打包
  • 热更新：通过 HotModuleReplacementPlugin 实时更新
  • 环境变量：使用 DefinePlugin 定义全局常量
  • 性能优化：启用 TerserPlugin 压缩代码，OptimizeCSSAssetsPlugin 优化 CSS
webpack_config

4. 扩展阅读

5. 实践技巧

  • 使用 mode: 'production' 自动启用优化
  • 通过 devServer 配置本地开发服务器
  • 结合 Babel 实现 ES6+ 语法支持
  • 利用 clean-webpack-plugin 自动清理输出目录
webpack_build