Skip to content
webpack 项目初始化
如果还没有项目目录，先创建一个空目录并进入：
bash
mkdir webpack-demo
cd webpack-demo初始化 package.json 并安装依赖
bash
npm init -y-y 跳过交互式问卷，直接生成一个带默认字段的 package.json。这个文件是包管理工具追踪依赖和脚本的基础。
安装 webpack 以及配套工具：
bash
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-pluginwebpack：核心打包引擎。webpack-cli：提供webpack命令行，让配置可以直接从终端驱动。webpack-dev-server：基于 Express 的开发服务器，内置自动刷新。打包产物只存在于内存中，默认不会写入磁盘。html-webpack-plugin：自动生成（或基于模板生成）一个index.html，并插入打包好的<script>标签。可以省去手动维护 HTML 中资源引用的麻烦。
安装完成后，package.json 的 devDependencies 会类似：
json
"devDependencies": {
"html-webpack-plugin": "^5.6.0",
"webpack": "^5.90.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.0"
}创建入口文件 src/index.js
webpack 默认入口是 src/index.js。先创建目录和文件：
bash
mkdir src
echo "console.log('webpack bundle running');" > src/index.js后续依赖图将从这个文件开始构建。
编写 webpack.config.js
在项目根目录新建 webpack.config.js：
javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: true,
},
devServer: {
port: 3000,
open: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack-demo',
}),
],
};几个关键字段：
mode: 'development'会启用调试友好的默认行为，例如不压缩代码、设置process.env.NODE_ENV为'development'。生产构建时应改为'production'。entry指定依赖图的入口，指向刚才创建的src/index.js。output.path必须是绝对路径，因此用path.resolve(__dirname, 'dist')拼接。filename指定输出的 JS 文件名。clean: true会在每次构建前清空dist目录，避免残留文件累积。devServer配置开发服务器：port指定监听端口，open: true让服务器启动后自动打开浏览器。plugins中引入HtmlWebpackPlugin，生成index.html并自动引入bundle.js。如果不传入模板，插件会使用默认的 HTML 结构，title选项则用于设置页面标题。
运行 webpack serve 并验证结果
在 package.json 的 scripts 中添加启动命令：
json
"scripts": {
"start": "webpack serve --config webpack.config.js"
}然后运行：
bash
npm start控制台会提示类似：
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:3000/
...
webpack 5.90.0 compiled successfully in xxx ms浏览器会打开 http://localhost:3000/，打开开发者工具的控制台，能看到 webpack bundle running。入口文件被 webpack 打包成 bundle.js，HtmlWebpackPlugin 生成的 HTML 正确引用了这个脚本。
修改 src/index.js 的内容（如改变打印信息），保存后页面会自动刷新——这是 webpack-dev-server 默认的 live reload 行为。HMR 需要额外配置，这里不展开。
Vite 项目初始化
Vite 提供了脚手架命令，可以直接生成一个可运行的项目模板，省去逐步配置的过程。
使用 npm create vite@latest 快速创建项目
bash
npm create vite@latest vite-demo -- --template vanillavite-demo是项目目录名。--template vanilla指定使用原生 JavaScript 模板（无框架）。如果不加--template，命令行会进入交互式选择。- npm 7 及以上版本需要额外的
--将选项传递给create-vite。yarn create vite不需要这个转义。
执行后，create-vite 会生成以下文件结构（简化显示）：
vite-demo
├── index.html
├── package.json
├── src
│ ├── main.js
│ └── style.css
└── ...接着安装依赖并启动：
bash
cd vite-demo
npm install
npm run dev控制台输出 Vite 开发服务器地址，默认 http://localhost:5173/。浏览器打开后，可以看到 vanilla 模板自带的计数器示例页面。
理解 index.html 作为开发入口
生成的 index.html 核心部分如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Vite 在开发模式下将 index.html 视为源码的一部分，而不仅仅是一个挂载页面。它会解析其中的 <script type="module" src="...">，并以此作为模块图的入口。这与 webpack 在 JS 文件中指定入口、再由插件生成 HTML 的思路不同。Vite 把 HTML 放在依赖解析链的最顶端，浏览器直接请求 main.js，后续的 import 都由浏览器发起的 ESM 请求驱动。
因此，在 Vite 项目中 index.html 必须位于项目根目录，不能放入 public 或 src 文件夹，否则开发服务器找不到入口。
编写最小化 vite.config.js（可选）
脚手架生成的项目已经包含一个 vite.config.js，内容极少：
javascript
import { defineConfig } from 'vite'
export default defineConfig({
// 插件和其他配置项可以在需要时添加
})如果完全不想写配置文件，Vite 也可以直接运行。从零开始手动搭建一个 Vite 项目（不使用 create-vite）时，只需：
bash
mkdir manual-vite
cd manual-vite
npm init -y
npm install -D vite然后手动创建根目录下的 index.html，内容同上面模板一致。接着在 package.json 中添加启动脚本：
json
"scripts": {
"dev": "vite"
}运行 npm run dev，Vite 会自动以当前目录的 index.html 作为入口启动开发服务器，不需要任何配置文件。
如果需要自定义端口或添加插件，可以创建 vite.config.js：
javascript
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 4000,
open: true,
},
})这与 webpack 的 devServer 配置作用类似。
注意：上面的配置文件使用了 ES 模块的
import语法。如果package.json没有设置"type": "module"，Node.js 会将.js文件视为 CommonJS 模块，执行import会报错。此时需要在package.json中添加"type": "module"，或者将配置文件重命名为vite.config.mjs。脚手架生成的项目已经默认包含了"type": "module"，所以手动搭建时要留意这一点。
两种初始化路径的差异
在初始化步骤、配置复杂度和启动速度上，两个工具差异明显。
步骤数：webpack 需要手动安装四个以上的依赖，编写 webpack.config.js，配置 entry、output、plugin、devServer。即便最简单的场景，配置文件也接近 20 行。Vite 使用 npm create vite@latest 可以一步生成项目结构，或者手动安装 vite 依赖并创建 index.html，无需任何构建配置。
配置文件：webpack 的 webpack.config.js 即使只想要默认入口和输出，也需要一个骨架配置来指定 mode 和 plugins。Vite 可以不写配置文件，运行时注入默认值；需要自定义时，vite.config.js 通常也比 webpack 配置短得多。
启动速度：冷启动时，webpack 需要先扫描整个依赖图，将所有模块打包成一个或多个 bundle，随着项目变大这一步会明显变慢。Vite 利用浏览器原生 ESM，第一次启动时只需做依赖预构建（用 esbuild 处理第三方库），源码部分按需编译，冷启动明显更快。在大型项目中这个差异会非常显著。不过 Vite 的首屏加载可能发起更多的模块请求，而 webpack 只会加载少量 bundle 文件，在极差网络条件下各有取舍。
开发服务器与 HTML 的关系：webpack 的开发服务器通常配合 HtmlWebpackPlugin 生成 HTML，入口逻辑藏在 JS 文件中。Vite 直接解析根目录的 index.html，将其放在模块图的最顶端。如果要从零配置多页面应用，webpack 可以用多个 HtmlWebpackPlugin 实例为每个页面指定不同 chunk；Vite 则需要额外配置 build.rollupOptions.input 或引入插件。本篇场景为单页面，因此差异不明显。
注意点
- webpack-dev-server 写入磁盘行为：默认情况下，
webpack-dev-server生成的打包文件存放在内存中，不会产生实际的dist目录。如果确实需要写入磁盘，可设置devServer.devMiddleware.writeToDisk: true，但通常没必要，还会拖慢速度。 - clean: true 的作用范围：
output.clean只清理output.path指定的目录。如果项目中有其他无关文件被手动放进dist，它们不会被自动删除。 - Vite 的 index.html 位置：Vite 开发服务器将根目录的
index.html作为入口。如果将其移入public、src等目录，服务器会返回 404。这与静态资源放在public目录的规则不同。 - 端口冲突：两个工具的默认端口可能不同（webpack-dev-server 默认 8080，Vite 默认 5173）。同时运行多个项目，或端口已被占用时，可分别修改
devServer.port或server.port。Vite 会自动尝试下一个可用端口，而 webpack-dev-server 需要显式配置或使用--portCLI 参数。 - npm create vite 的 Node.js 版本要求：Vite 官方指出需要 Node.js 20.19+ 或 22.12+，部分模板要求更高。系统 Node 版本较低时脚手架命令会报错。手动安装
vite并自行编写index.html对版本要求相对宽松，但仍建议使用维护中的 LTS 版本。 - ES 模块语法与配置文件：在手动搭建 Vite 项目时，若
vite.config.js中使用import语句，必须确保package.json设置了"type": "module"，或者将文件命名为vite.config.mjs。 - 依赖安装范围：webpack 示例将
html-webpack-plugin作为 devDependency。Vite 脚手架生成的项目中，vite也在 devDependencies 里，因为最终部署时不会用到开发服务器本身。
小结
本篇介绍了两种搭建前端开发环境的方式：通过 webpack 的依赖安装、配置文件、插件组合一步步构建本地开发服务器；以及使用 Vite 的脚手架命令或手动安装依赖并编写 index.html 来快速启动。两种路径都能实现本地开发环境的基本目标，但在步骤数量、配置复杂度以及启动体验上存在明显区别。