现代前端工程化第一步：用 Webpack 搭建你的第一个项目

极客Data

2025-12-26 02:46

阅读 499

大家好，我是你们的老朋友，一个在大厂搬了三年砖、业余时间在 B站分享技术的前端开发者。今天这篇教程，源于我最近收到的一条私信：“学完 HTML/CSS/JS 后，看到简历上写着‘熟悉 Webpack’就懵了，这到底是什么？怎么用？”

其实，我当初学的时候也是一头雾水。Webpack？打包？模块化？听起来像天书。但别怕！这篇文章就是为完全零基础的你量身打造的。我们会用最简单的语言、最真实的代码，手把手带你跑通一个 Webpack 项目。更重要的是——这个项目能直接写进你的简历里！

为什么你需要 Webpack？

想象一下：你写了一个网页，里面有 10 个 JS 文件、5 个 CSS 文件。每次打开页面，浏览器要发 15 次请求去加载资源，速度慢还容易出错。

而 Webpack 就是一个“打包工”：它能把所有零散的文件（JS、CSS、图片等）合并成一个或几个文件，让浏览器一次加载完成。不仅如此，它还能帮你：

自动转换新语法（比如把 ES6 转成浏览器能看懂的 ES5）
压缩代码减小体积
开发时自动刷新页面（热更新）

💡 技术分享时刻：现在几乎所有前端项目（React/Vue/Angular）都依赖 Webpack 或类似工具。掌握它，是迈向“专业前端”的关键一步。

第一步：搭建开发环境（超详细）

我们不需要复杂的 IDE，只需要三样东西：

Node.js（>=14.0.0）
→ 官网下载安装：https://nodejs.org
→ 安装后终端输入 node -v 和 npm -v 验证是否成功
代码编辑器（推荐 VS Code）
终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD）

⚠️ 新手注意：不要用中文路径！项目文件夹名建议全英文，比如 my-webpack-app

创建项目骨架

打开终端，执行以下命令：

# 1. 创建项目文件夹
mkdir my-webpack-app
cd my-webpack-app

# 2. 初始化 npm 项目（一路回车即可）
npm init -y

# 3. 安装 Webpack 核心包
npm install --save-dev webpack webpack-cli

📌 --save-dev 表示这些工具只在开发阶段使用，不会打包到线上代码中。

此时你的项目结构应该是这样的：

my-webpack-app/
├── node_modules/     # 依赖包（自动生成）
├── package.json      # 项目配置文件
└── package-lock.json

核心概念：入口、出口、加载器、插件

Webpack 的工作流程可以用一句话概括：

从一个入口文件开始，递归分析所有依赖，最终输出打包后的文件。

我们来拆解四个关键词：

概念	作用	类比
入口（entry）	打包的起点文件	旅行的出发地
出口（output）	打包结果存放位置	目的地
加载器（loader）	处理非 JS 文件（如 CSS、图片）	翻译官
插件（plugin）	执行更复杂的任务（如生成 HTML）	特效师

✅ 我当初学的时候，死记硬背这些概念很痛苦。后来我告诉自己：“Webpack 就是个快递打包机——你给它一堆零件（源文件），它给你一个包裹（bundle.js）。”

实战：搭建一个能运行的最小项目

我们现在要做的，是创建一个网页，点击按钮弹出 “Hello Webpack!”。

1. 创建源代码目录

mkdir src
touch src/index.html src/index.js

💡 Windows 用户可用记事本或 VS Code 手动创建文件

2. 编写源代码

src/index.js

// 这是我们应用的入口 JS
function sayHello() {
  alert('Hello Webpack!');
}

// 绑定按钮点击事件
document.getElementById('btn').addEventListener('click', sayHello);

src/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webpack 入门</title>
</head>
<body>
  <button id="btn">点我</button>
  <!-- 注意：这里不直接引入 index.js！ -->
</body>
</html>

❗ 重点：HTML 里不能直接写 <script src="index.js">，因为打包后的文件名会变！

3. 配置 Webpack

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

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  
  // 输出配置
  output: {
    filename: 'bundle.js',                // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 输出到 dist 文件夹
  }
};

4. 修改 package.json 脚本

在 package.json 的 scripts 字段添加：

{
  "scripts": {
    "build": "webpack --mode=production"
  }
}

现在运行打包命令：

npm run build

你会看到项目多了一个 dist/ 文件夹，里面包含：

bundle.js（打包后的 JS）
但没有 HTML！

5. 自动生成 HTML：引入 HtmlWebpackPlugin

问题来了：如何让 HTML 自动引入 bundle.js？手动写太麻烦，而且 hash 名会变。

解决方案：安装插件！

npm install --save-dev html-webpack-plugin

修改 webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' // 以这个文件为模板
    })
  ]
};

再次运行 npm run build，你会发现 dist/ 里多了 index.html，并且自动包含了：

<script defer="defer" src="bundle.js"></script>

完美！

开发模式：启动本地服务器 + 热更新

每次改代码都要 npm run build 太痛苦了！Webpack 提供了开发服务器。

安装 webpack-dev-server：

npm install --save-dev webpack-dev-server

在 package.json 中添加开发脚本：

{
  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack serve --mode=development"
  }
}

运行：

npm run dev

终端会显示：

Project is running at http://localhost:8080/

打开浏览器，点击按钮试试！修改 index.js 保存后，页面会自动刷新——这就是热更新。

新手常见问题解答（避坑指南）

Q1：为什么我改了代码，页面没更新？

检查是否运行了 npm run dev 而不是 npm run build
确保浏览器没开“禁用缓存”（Chrome DevTools → Network → 勾选 Disable cache）

Q2：打包后图片/CSS 不显示？

因为你还没配置对应的 loader！Webpack 默认只处理 JS。后续你需要：

css-loader + style-loader 处理 CSS
file-loader 或 url-loader 处理图片

🔜 这些会在进阶教程中讲解，入门阶段先聚焦核心流程。

Q3：`dist` 文件要不要提交到 Git？

不要！ 在 .gitignore 中加入：

/dist
/node_modules

因为 dist 是可生成的产物，团队协作时每个人自己 build 即可。

把这个项目写进简历！

很多同学简历写“了解 Webpack”，但面试一问就露馅。现在你可以这样写：

个人项目：基于 Webpack 的前端工程化实践

使用 Webpack 5 搭建模块化开发环境

配置入口/出口、HtmlWebpackPlugin 自动生成 HTML

实现开发服务器与热更新，提升开发效率

掌握工程化思维，理解现代前端构建流程

💡 技术分享建议：把这个项目上传到 GitHub，附上 README 说明。面试时直接展示，比空谈“熟悉”有力得多！

下一步学习路径

Webpack 只是工程化的冰山一角。建议你按顺序学习：

深入 Webpack
- 学习 loader（处理 CSS、图片、字体）
- 学习 plugin（代码压缩、环境变量）
- 配置多环境（开发/生产）
尝试现代构建工具
- Vite（更快，适合 Vue/React 新项目）
- Parcel（零配置，适合小项目）
结合框架实战
- 用 Webpack 手动搭建 React 或 Vue 项目（不依赖脚手架）
- 理解 create-react-app / vue-cli 底层原理

🌟 我的 B 站频道下周会更新《Webpack 进阶：从零配置 React 项目》，记得关注！

最后的话

我当初学 Webpack 时，花了整整一周才跑通第一个 demo。但现在回头看，只要理解“入口→处理→出口”这个核心逻辑，一切都不难。

前端工程化不是魔法，而是一套解决问题的工具链。 你不需要一开始就精通所有配置，但必须迈出第一步。

希望这篇教程能成为你的那一步。如果觉得有帮助，欢迎点赞收藏，也欢迎在评论区留言你的问题——我会一一解答！

技术路上，你我同行。下期见！

标签:教程技术分享简历

最热最新

暂无评论

为你推荐

暂无相关推荐

现代前端工程化第一步：用 Webpack 搭建你的第一个项目

为什么你需要 Webpack？

第一步：搭建开发环境（超详细）

创建项目骨架

核心概念：入口、出口、加载器、插件

实战：搭建一个能运行的最小项目

1. 创建源代码目录

2. 编写源代码

3. 配置 Webpack

4. 修改 package.json 脚本

5. 自动生成 HTML：引入 HtmlWebpackPlugin

开发模式：启动本地服务器 + 热更新

新手常见问题解答（避坑指南）

Q1：为什么我改了代码，页面没更新？

Q2：打包后图片/CSS 不显示？

Q3：`dist` 文件要不要提交到 Git？

把这个项目写进简历！

下一步学习路径

最后的话

评论 0

为你推荐

精选内容

现代前端工程化第一步：用 Webpack 搭建你的第一个项目

为什么你需要 Webpack？

第一步：搭建开发环境（超详细）

创建项目骨架

核心概念：入口、出口、加载器、插件

实战：搭建一个能运行的最小项目

1. 创建源代码目录

2. 编写源代码

3. 配置 Webpack

4. 修改 package.json 脚本

5. 自动生成 HTML：引入 HtmlWebpackPlugin

开发模式：启动本地服务器 + 热更新

新手常见问题解答（避坑指南）

Q1：为什么我改了代码，页面没更新？

Q2：打包后图片/CSS 不显示？

Q3：dist 文件要不要提交到 Git？

把这个项目写进简历！

下一步学习路径

最后的话

评论 0

为你推荐

相关推荐

精选内容

Q3：`dist` 文件要不要提交到 Git？