webpack

现代 JavaScript 应用程序的静态模块打包工具。将各种资源（JS、CSS、图片等）打包成一个或多个文件，支持动态加载、模块化开发和多种优化方式。特别适合大型单页应用（SPA）。

安装

# 全局安装
npm install -g webpack webpack-cli
 
# 项目中安装（推荐）
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',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

常用命令

npx webpack                          # 读取 webpack.config.js 打包
npx webpack --mode development       # 开发模式（含 source map）
npx webpack --mode production        # 生产模式（自动压缩优化）
npx webpack serve --open             # 启动 Dev Server（热更新）

工具边界

场景	推荐
大型 SPA，高度定制构建	webpack
快速开发体验	vite
库打包	rollup
极速构建	esbuild

踩坑点

• 配置复杂，学习曲线陡峭；初次配置建议用 webpack-cli init 脚手架
• 开发模式下冷启动慢，大型项目建议配合 babel-loader 缓存
• 与 vite 相比，HMR 速度较慢