前端十年：从0到资深开发者的10堂必修课

第6篇：工程化篇——从Webpack到Vite，打造现代化构建流程

当项目规模扩大，手动管理文件依赖、压缩代码、转换新语法变得不再现实。前端工程化应运而生，它通过工具和规范帮助我们提升开发效率、保证代码质量。本篇将带你回顾模块化的演进，深入 Webpack 的核心机制，并拥抱新一代构建工具 Vite，最后建立代码规范与 Git 提交检查，打造一套完整的现代化前端工程化流程。

---

一、模块化历史

在 JavaScript 早期，代码通常通过全局变量和函数组织，极易导致命名冲突和依赖混乱。为了解决这些问题，社区逐渐发展出多种模块化规范。

1. CommonJS

CommonJS 主要应用于 Node.js 环境，使用 require 同步加载模块，通过 module.exports 导出。

// math.js
const add = (a, b) => a + b;
module.exports = { add };

// main.js
const { add } = require('./math');
console.log(add(2, 3)); // 5

由于同步加载不适合浏览器（会导致阻塞），CommonJS 并未被浏览器原生支持。

2. AMD（Asynchronous Module Definition）

AMD 专为浏览器设计，支持异步加载模块。最著名的实现是 RequireJS。

// 定义模块
define('math', [], function() {
  return { add: (a, b) => a + b };
});

// 加载模块
require(['math'], function(math) {
  console.log(math.add(2, 3));
});

AMD 语法相对繁琐，逐渐被更优雅的方案取代。

3. ES Module（ESM）

ES6 正式引入了原生模块系统，成为目前前端开发的标配。使用 import 和 export 关键字，支持静态分析、树摇（tree shaking）等优化。

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

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

现代浏览器已原生支持 ESM，但为了兼容性和附加功能（如热更新、代码压缩），我们依然需要构建工具。

---

二、Webpack 核心

Webpack 是目前最成熟的模块打包工具，它将项目中的所有资源（JS、CSS、图片等）视为模块，通过 loader 转换，plugin 优化，最终打包成浏览器可运行的静态资源。

1. Entry/Output、Loader、Plugin

Entry（入口）：指定 Webpack 从哪个文件开始构建依赖图。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
};

Output（输出）：配置打包后的文件输出位置和文件名。

const path = require('path');
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Loader（加载器）：Webpack 原生只理解 JavaScript 和 JSON 文件。loader 让 Webpack 能够处理其他类型文件，并将其转换为有效模块。

• babel-loader：将 ES6+ 语法转换为兼容旧浏览器的代码。
• css-loader：解析 CSS 文件中的 @import 和 url()。
• style-loader：将 CSS 插入到 DOM 的 <style> 标签中。
• file-loader / url-loader：处理图片、字体等资源。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // Webpack 5 内置资源模块
      },
    ],
  },
};

Plugin（插件）：插件可以执行更广泛的任务，如打包优化、资源管理、环境变量注入等。

• HtmlWebpackPlugin：自动生成 HTML 文件并引入打包后的脚本。
• MiniCssExtractPlugin：将 CSS 提取为单独文件。
• DefinePlugin：定义全局常量。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

2. 开发环境与生产环境配置分离

实际项目中，我们通常为开发和生产环境编写不同的 Webpack 配置。

• 开发环境：需要快速构建、热更新、源码映射（source map）。
• 生产环境：需要代码压缩、文件指纹（hash）、资源优化。

可以使用 webpack-merge 合并公共配置。

// webpack.common.js
module.exports = {
  entry: './src/index.js',
  output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') },
  module: { rules: [...] },
  plugins: [...],
};

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: { static: './dist', hot: true },
});

// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
  ],
  optimization: { minimize: true },
});

通过 --config 指定配置文件运行。

---

三、Vite 新时代

Vite 是尤雨溪团队开发的新一代构建工具，利用浏览器原生 ES Module 支持，在开发环境下提供极速的服务启动和热更新，生产环境则使用 Rollup 打包。

1. 基于 ES Module 的极速启动

在传统打包工具（如 Webpack）中，开发服务器启动时需先打包整个应用，随着项目增大启动速度会变慢。

Vite 则直接将源码作为 ES Module 提供给浏览器，浏览器请求哪个模块，Vite 就实时转换哪个模块并返回。这意味着无需预先打包，服务器启动几乎瞬间完成。

工作原理：

• 启动服务器后，Vite 通过 index.html 中的 <script type="module" src="/src/main.js"> 识别入口。
• 浏览器请求 main.js，Vite 将源码中的裸模块导入（如 import React from 'react'）转换为浏览器可识别的路径（如 /@modules/react），并返回转换后的内容。
• 对于非 JS 文件（如 CSS、图片），Vite 同样通过插件实时处理。

2. HMR 原理与配置

Vite 的热模块替换（HMR）比 Webpack 更高效，因为它基于原生 ESM，只更新变更的模块，无需重新打包。

配置：Vite 配置文件为 vite.config.js，极其简洁。

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()], // 支持 React
  server: {
    port: 3000,
    open: true,
    proxy: { '/api': 'http://localhost:8080' },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

HMR API：在应用中可以通过 import.meta.hot 接受模块更新。

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // 处理更新
  });
}

Vite 的插件机制基于 Rollup 插件接口，生态正迅速完善，绝大多数 Webpack 的功能都能找到对应 Vite 插件。

---

四、代码规范与质量

工程化不仅包括构建工具，还涵盖代码规范、提交检查等质量保证措施。

1. ESLint + Prettier 配置

ESLint 负责代码质量检查（如未使用变量、潜在错误），Prettier 负责代码格式化（如缩进、分号）。两者结合使用能保持代码风格一致。

安装：

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

ESLint 配置（.eslintrc.js）：

module.exports = {
  env: { browser: true, es2021: true, node: true },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/react-in-jsx-scope': 'off', // React 17+ 无需引入 React
  },
  settings: { react: { version: 'detect' } },
};

Prettier 配置（.prettierrc）：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

集成到编辑器：在 VS Code 中安装 ESLint 和 Prettier 插件，并设置保存时自动格式化。

2. Git Hooks 与 lint-staged

为了保证每次提交的代码都符合规范，可以使用 Git Hooks 在提交前自动执行检查和格式化。husky 可以方便地管理 Git Hooks，lint-staged 只对暂存区文件运行检查。

安装：

npm install husky lint-staged --save-dev

配置 package.json：

{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

创建 pre-commit hook：

npx husky add .husky/pre-commit "npx lint-staged"

现在，每次执行 git commit 时，都会自动对暂存区的文件进行 ESLint 检查和 Prettier 格式化，确保代码质量。

---

总结

本篇我们系统学习了前端工程化的核心：

• 模块化演进：从 CommonJS、AMD 到 ES Module，理解了它们各自的应用场景。
• Webpack 核心：掌握了 entry/output、loader、plugin 的配置，以及如何区分开发/生产环境。
• Vite 新时代：理解了基于原生 ESM 的极速启动和 HMR 原理，体验了简洁的配置。
• 代码规范：通过 ESLint + Prettier 保持代码质量，利用 husky + lint-staged 在 Git 提交时自动检查。

工程化是前端开发效率的基石。掌握这些工具后，你可以轻松搭建一个现代化、规范化的前端项目。下一篇我们将深入 网络篇，探讨 HTTP/HTTPS、RESTful 与 GraphQL 实战，敬请期待！

---

思考题：

1. Webpack 的 Loader 和 Plugin 有什么区别？能否举例说明？
2. Vite 在开发环境下为什么比 Webpack 快？生产环境打包为什么选择了 Rollup？
3. 如何在 Vite 项目中配置路径别名（alias）？
4. lint-staged 的作用是什么？如果不用它直接在 pre-commit 中运行全量检查会有什么问题？

欢迎在评论区分享你的见解和疑问，一起讨论进步！