开始第一个 Webpack 项目
🎯 引言
通过本文的学习，你将掌握如何搭建一个简单的 Webpack 项目环境，从安装 Webpack，配置项目结构，到编写配置文件，完成打包生成最终的 JavaScript 文件，并在 HTML 页面中正确引入。实际开发中，你能快速启动一个现代化的模块打包流程，提高前端项目的开发效率和代码质量。
🛠️ 安装 Webpack
1. 创建一个空的项目
mkdir webpack-project
cd ./webpack-project
2. 初始化 package.json
npm init
执行 npm init 后，终端会问你一堆问题，别慌～一直按回车就行，默认选项就够用了！。最后项目根目录会生成 package.json 文件，主要用于管理即将安装的插件。
3. 安装 webpack 插件
npm install webpack webpack-cli
Webpack 是用来打包模块的工具，webpack-cli 是它的命令行助手。我们这一步先把它们一起装上。
📁 webpack 目录结构介绍
项目结构可以是这样：
webpack-project/
├── src/
│ └── index.js
├── dist/
│ └── index.html
├── webpack.config.js
└── package.json
src/目录放置所有源代码文件，这里放入口文件index.js。dist/目录存放打包后的文件和 HTML 文件。webpack.config.js是 Webpack 的配置文件，告诉它如何处理项目。
这些文件夹你可以自己慢慢建，也可以直接在编辑器里新建，怎么方便怎么来～
⚙️ 编写第一个 Webpack 配置文件
在项目根的目录 webpack.config.js 文件，写入以下内容：
const path = require('path');
module.exports = {
entry: './src/index.js', // 打包入口
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出路径，必须是绝对路径
},
mode: 'development',
};
这里的配置很简单：
entry指定入口文件路径，就是 Webpack 从哪里开始打包。output配置打包生成的文件名和路径。mode设置为development，方便调试，后期可以改成production优化代码。
output.path 是个绝对路径，咱们用 path.resolve 处理一下，就能避免路径出错啦～🚀 设置打包入口文件 entry 和输出文件 output
前面配置文件里的 entry 和 output 是核心，Webpack 根据入口文件，递归解析依赖，最终生成一个或多个打包文件。
这里我们入口是 src/index.js，输出文件是 dist/bundle.js。
创建 src/index.js，写入简单代码测试：
console.log('Hello Webpack!');
🏗️ 运行构建命令，生成 bundle.js
现在我们执行打包命令。
在 package.json 的 scripts 里添加一条命令：
"scripts": {
"build": "webpack"
}
然后在终端运行：
npm run build
Webpack 会根据配置自动打包，生成 dist/bundle.js 文件。
你可以打开 dist 文件夹，看到生成的 bundle.js。
🌐 使用 script 标签引入构建结果页面
最后一步，我们得准备一个网页，把打包后的代码用 <script> 标签引入进去，这样才能在浏览器里跑起来！
在 dist/index.html 写入：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>第一个 Webpack 项目</title>
</head>
<body>
<h1>欢迎使用 Webpack！</h1>
<script src="bundle.js"></script>
</body>
</html>
直接用浏览器打开 dist/index.html，打开控制台你会看到 Hello Webpack! 的输出。
到此，我们的 webpack 项目已经搭建完成啦！
🧾 小节总结
- Webpack 和 webpack-cli 是实现模块打包的关键依赖。
- 项目结构清晰，入口文件放
src/，打包输出放dist/。 webpack.config.js配置打包入口、输出文件和模式。- 通过命令行执行
npm run build生成打包文件。 - 在 HTML 中通过
script标签正确引入打包后的bundle.js。
❓ 知识问答（Q&A）
Q： 为什么需要 webpack-cli？
A： webpack-cli 是 Webpack 的命令行工具，没有它，你无法通过命令行执行打包命令。
Q： output.path 为什么一定要绝对路径？
A： Webpack 需要绝对路径来准确定位输出目录，避免路径解析错误。
Q： 生产环境和开发环境配置有什么区别？
A： 开发环境 (mode: 'development') 会保留调试信息，生产环境 (mode: 'production') 会压缩代码并优化性能。
🧪 小练习
题目1：修改入口文件 src/index.js，新增一个函数打印当前时间，并在页面加载时调用它。
模板代码：
function printTime() {
// 在这里实现打印当前时间的功能
}
printTime();
🎉 恭喜你已经掌握 Webpack 安装、配置、打包、引入的技能啦！可以开始尝试将更多模块代码拆分进项目，享受高效现代化前端开发体验！