Webpack 是一个现代 JavaScript 应用的静态模块打包工具，将 JS、CSS、图片等资源视为模块，通过依赖图打包为浏览器可运行文件，并通过 loader 处理非 JS 资源、plugin 扩展构建能力，支持代码分割与热更新。

Webpack 是一个用于现代 JavaScript 应用的静态模块打包工具。它把项目中所有资源（JS、CSS、图片、字体等）都视为模块，通过依赖关系图（dependency graph）将它们打包成一个或多个浏览器可运行的文件（如 bundle.js）。

Webpack 的核心作用：解决模块化与资源管理问题

浏览器原生只支持简单的 标签加载，不支持 CommonJS（require）、ES Module（import/export）等语法，也不懂如何处理 CSS 或 SVG。Webpack 填补了这个 gap：

• 将不同模块语法（ESM、CommonJS、AMD）统一转换、解析和合并
• 通过 loader（如 babel-loader、css-loader）处理非 JS 文件
• 通过 plugin（如 HtmlWebpackPlugin、MiniCssExtractPlugin）扩展构建能力（注入 HTML、抽离 CSS、压缩代码等）
• 支持代码分割（code splitting）、懒加载（dynamic import）、热更新（HMR）等高级特性

如何用 Webpack 打包一个简单模块

以一个含 ES Module 的小项目为例：

npm init -y
npm install --save-dev webpack webpack-cli

src/index.js：

import { add } from './math.js';
console.log(add(2, 3));

src/math.js：
export const add = (a, b) => a + b;

npx webpack --mode=development
默认会以 src/index.js 为入口，输出到 dist/main.js。

新建 dist/index.html，引入 ，打开即可运行。

配置 Webpack（webpack.config.js）

当需求变复杂（比如要处理 CSS、自动注入 HTML），需手动配置：

在项目根目录创建 webpack.config.js：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

注意：style-loader 和 css-loader 需单独安装：npm install --save-dev style-loader css-loader。

常见打包流程与关键概念

• Entry：入口文件，Webpack 从这里开始构建依赖图
• Output：打包后文件的输出位置和命名规则
• Loader：翻译器，让 Webpack 能“读懂”非 JS 文件（如 .vue、.scss、.png）
• Plugin：增强器，执行资源优化、环境注入、生成 HTML 等任务
• Mode：指定 development（开发模式，带 source map）或 production（生产模式，自动压缩、Tree Shaking）

不复杂但容易忽略。理解入口、loader、plugin 这三块，就能应对大多数打包场景。

# css  # ai  # 懒加载  # 工具  # 浏览器  # npm  # svg  # js  # html  # java  # javascript  # vue  # amd