大家好，这里是 前端航海日志！
在开发前端应用时，许多开发者都会选择使用脚手架工具来快速生成项目结构和配置环境，但这些工具背后的原理往往不为人所知。为了更深入地了解前端构建工具，我决定手动创建一个 Vue 项目并配置 Webpack，亲自体验整个项目搭建的过程。
在这篇文章中，我将带领大家通过一步步的操作，从创建项目目录到配置 Webpack，直至成功运行 Vue 应用。通过这些步骤，你将更清晰地理解 Webpack 的配置细节以及如何将它与 Vue 集成。
1. 创建项目目录
首先，打开终端并创建一个新目录，然后进入该目录：
mkdir my-vue-project
cd my-vue-project
2. 初始化 npm 项目
在项目目录中，初始化 npm 项目：
npm init -y
3. 安装 Vue 和 Webpack 相关依赖
安装 Vue、Webpack 及其相关工具：
npm install vue
npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader vue-loader vue-template-compiler
webpack: 核心构建工具。webpack-cli: Webpack 命令行工具。webpack-dev-server: 提供开发服务器。html-webpack-plugin: 用于生成 HTML 文件。css-loader: 用于处理 CSS 文件。vue-loader: 用于处理 Vue 单文件组件（.vue文件）。vue-template-compiler: 用于编译 Vue 模板。
4. 创建项目结构
创建项目所需的基本文件和目录结构：
mkdir src
touch src/main.js
touch src/App.vue
touch src/index.html
touch webpack.config.js
5. 配置 Webpack
编辑 webpack.config.js 文件，添加以下内容：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
clean: true,
},
devServer: {
static: './dist',
open: true,
},
module: {
rules: [
{
test: /\\.vue$/,
loader: 'vue-loader',
},
{
test: /\\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
extensions: ['.js', '.vue', '.json'],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
};
6. 创建 Vue 组件
在 src/App.vue 中添加基本的 Vue 组件：
<template>
<h1>Hello, Vue with Webpack!</h1>
</template>
<script>
export default {
name: 'App',
};
</script>
<style>
h1 {
color: blue;
}
</style>
7. 创建入口文件
在 src/main.js 中添加 Vue 实例：
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
8. 创建 HTML 文件
在 src/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>Vue with Webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
9. 添加开发和构建脚本
在 package.json 中添加脚本：
"scripts": {
"serve": "webpack serve",
"build": "webpack"
}
10. 启动开发服务器
运行以下命令以启动开发服务器：
npm run serve
11. 访问项目
打开浏览器并访问 http://localhost:8080，你应该可以看到 "Hello, Vue with Webpack!" 的页面。
总结
以上步骤提供了使用 Webpack 手动创建 Vue 项目的基础流程。你可以根据需要进一步配置和扩展项目，包括添加 Babel 支持、配置 CSS 预处理器、处理图片等资源。
感谢大家的支持！如果这篇文章帮到你，别忘了点赞 ❤、收藏⭐，让我们在前端的航海路上继续扬帆起航！
