Webpack 入门与基础 —— 前端工程化必备技能

系列文章第 1 篇 | 预计阅读时间：15 分钟

一、为什么需要打包工具？

在现代前端开发中，我们会使用各种框架（React、Vue）、ES6 模块化语法、Less/Sass 等 CSS 预处理器。但这些代码无法直接在浏览器中运行，必须经过编译转换成浏览器能识别的 JavaScript 和 CSS。

打包工具的核心作用：

✅ 编译转换：将现代语法编译为浏览器兼容的代码
✅ 模块合并：将多个模块文件打包成少量文件
✅ 资源处理：处理 CSS、图片、字体等资源
✅ 代码优化：压缩代码、提升性能

主流打包工具对比：

工具	特点	适用场景
Webpack	功能强大、生态丰富	中大型项目
Vite	极速启动、基于 ESM	现代浏览器项目
Rollup	打包库/组件库	npm 包发布
Parcel	零配置	快速原型

为什么选择 Webpack？

目前市面上最流行的打包工具，生态最完善，企业使用率最高，是前端工程师的必备技能。

二、你能学到什么？

本系列课程分为四个阶段：

🥉 青铜阶段：Webpack 基础使用（是什么、怎么用）
🥈 黄金阶段：高级优化配置（面试常考点）
🥇 钻石阶段：从零搭建项目脚手架（React/Vue 实战）
👑 王者阶段：Webpack 原理分析（迈向大神之路）

三、Webpack 基本使用

3.1 什么是 Webpack？

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为入口，将项目中所有文件编译组合成一个或多个 bundle 文件输出，供浏览器运行。

3.2 快速开始

步骤 1：创建项目结构

webpack_code/
├── src/
│   ├── js/
│   │   ├── count.js
│   │   └── math.js
│   └── main.js
├── public/
│   └── index.html
└── package.json

步骤 2：编写示例代码

count.js

export default function count(x, y) {
  return x - y;
}

math.js

export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}

main.js

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

步骤 3：初始化项目

# 初始化 package.json
npm init -y

# 安装 Webpack（注意：name 不能叫 webpack）
npm i webpack webpack-cli -D

步骤 4：执行打包

# 开发模式
npx webpack ./src/main.js --mode=development

# 生产模式
npx webpack ./src/main.js --mode=production

参数说明：

npx webpack：运行本地安装的 Webpack
./src/main.js：指定入口文件
--mode=xxx：指定打包模式

步骤 5：查看输出

打包完成后，Webpack 会生成 dist/main.js 文件，在 HTML 中引入即可运行。

四、开发模式 vs 生产模式

4.1 开发模式（Development）

用途： 编写代码时使用

核心功能：

编译 ES Module 语法
支持热模块替换（HMR）
生成 Source Map 便于调试
不压缩代码，保留可读性

4.2 生产模式（Production）

用途： 代码上线部署

核心功能：

编译 ES Module 语法
自动压缩代码
Tree Shaking 移除无用代码
优化打包体积和运行性能

五、处理样式资源

Webpack 本身只能处理 JavaScript，其他资源需要借助 Loader。

5.1 处理 CSS

安装依赖：

npm i css-loader style-loader -D

两个 Loader 的作用：

css-loader：将 CSS 编译成 Webpack 能识别的模块
style-loader：创建 <style> 标签，将样式注入页面

配置文件（webpack.config.js）：

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 从右到左执行
      },
    ],
  },
  mode: "development",
};

在 JS 中引入 CSS：

import "./css/index.css";

5.2 处理 Less/Sass/Stylus

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
};

安装命令：

npm i less-loader -D                    # Less
npm i sass-loader sass -D               # Sass/Scss
npm i stylus-loader -D                  # Stylus

六、处理 JavaScript 资源

Webpack 默认只能编译 ES Module 语法，要实现兼容性处理和代码规范检查，需要 Babel 和 ESLint。

6.1 ESLint 代码检查

作用： 统一团队代码风格，提前发现潜在问题

安装：

npm i eslint-webpack-plugin eslint -D

.eslintrc.js 配置：

module.exports = {
  extends: ["eslint:recommended"],
  env: {
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 禁止使用 var
  },
};

webpack.config.js 配置：

const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  plugins: [
    new ESLintWebpackPlugin({
      context: path.resolve(__dirname, "src"),
    }),
  ],
};

6.2 Babel 兼容性编译

作用： 将 ES6+ 语法转换为向后兼容的 JavaScript