javascript Webpack是什么_如何打包模块

狼影 2026-01-01 00:00:00 次阅读

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 的小项目为例：

1. 初始化项目并安装 Webpack

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

2. 创建基础文件

src/index.js：

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

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

3. 运行打包命令

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

4. 在 HTML 中使用结果

新建 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）