作为前端开发者，Webpack 是绕不开的构建工具。最近系统学习了 Webpack 的自动构建和服务器搭建，整理了一套从基础到实战的操作笔记，包含具体案例和踩坑经验，适合新手跟着实操。
前言：为什么需要 Webpack 构建工具？
刚开始写前端项目时，我们习惯在 index.html 里手动引入各种 js、css 文件。但随着项目变大，会遇到两个核心问题：
- 资源越来越多，手动管理引入路径容易出错（尤其是加哈希值优化缓存时）；
- 开发时需要频繁刷新页面看效果，效率太低。
Webpack 正是为解决这些问题而生——它能自动打包资源、处理依赖，还能配合插件搭建本地服务器，实现实时预览。下面从实际操作出发，一步步带你掌握这些功能。
基础操作：从环境搭建到第一个打包案例
1. 安装 Webpack 核心依赖
首先得卸载可能存在的旧版本，避免冲突：
1# 卸载全局或本地的旧版本 2npm uninstall --save-dev webpack 3npm uninstall --save-dev webpack-cli 4
然后安装指定版本（版本兼容很重要，这里选的是稳定组合）：
1npm install --save-dev [email protected] # 核心构建工具 2npm install --save-dev [email protected] # 命令行工具 3npm install --save-dev [email protected] # 本地服务器 4
2. 实战案例1：点击按钮打印"Hello world"
目标：用 Webpack 打包两个 JS 文件，实现点击按钮在控制台输出信息。
项目结构
1project/ 2├─ src/ 3│ ├─ index.js # 入口文件 4│ └─ print.js # 工具函数 5├─ dist/ # 打包后输出目录（自动生成） 6└─ package.json 7
代码实现
src/print.js（工具函数）：
1export default function printHello() { 2 3 4 console.log('Hello world'); 5}
src/index.js（入口文件，引入并使用工具函数）：
1// 导入print.js中的函数（import必须放在代码最前面） 2import printHello from './print'; 3// 创建按钮并绑定事件 4let btn = document.createElement('button'); 5btn.innerHTML = '点我'; 6btn.onclick = printHello; // 点击时执行printHello函数 7document.body.appendChild(
《Webpack实战笔记：从自动构建到本地服务器搭建的完整流程》 是转载文章，点击查看原文。
