02｜Webpack编译搭建：如何用Webpack初构建Vue 3项目？-Vue3企业级项目实战 - 码小课 - 程序员在线学习平台

当前位置:　首页>> 技术小册>> Vue3企业级项目实战

### 02｜Webpack编译搭建：如何用Webpack初构建Vue 3项目？

在Vue 3的企业级项目开发中，Webpack作为现代JavaScript应用程序的静态模块打包器，扮演着至关重要的角色。它不仅能够处理应用程序中的JS、CSS、图片等资源文件，还能通过丰富的loader和plugin系统，实现代码的转换、压缩、分割等高级功能，从而优化项目的加载速度和运行效率。本章将详细介绍如何使用Webpack从零开始构建一个Vue 3项目的基础架构。

#### 一、环境准备

在开始之前，请确保你的开发环境中已安装Node.js和npm/yarn。Node.js是JavaScript的运行环境，而npm（或yarn）则是Node.js的包管理工具，用于安装和管理项目依赖。

1. **安装Node.js**：访问[Node.js官网](https://nodejs.org/)下载并安装适合你操作系统的版本。
2. **检查Node.js和npm版本**：在终端或命令提示符中运行`node -v`和`npm -v`来确认安装成功及版本信息。

#### 二、初始化项目

1. **创建项目文件夹**：在合适的位置创建一个新的文件夹作为你的Vue 3项目目录，例如`vue3-webpack-project`。

2. **初始化npm项目**：在项目文件夹中打开终端或命令提示符，运行`npm init -y`（或`yarn init -y`如果你使用yarn）来快速生成`package.json`文件。这个文件将用于管理项目的依赖、脚本等信息。

#### 三、安装Vue 3和Webpack

1. **安装Vue 3**：虽然Webpack本身不直接依赖Vue，但我们需要Vue 3作为项目的核心框架。运行以下命令安装Vue 3：
   ```bash
   npm install vue@next --save
   # 或者如果你使用yarn
   yarn add vue@next
   ```

2. **安装Webpack及其核心依赖**：Webpack本身及其核心插件（如webpack-cli）是必需的。同时，为了支持Vue文件的编译，我们需要vue-loader和vue-template-compiler（在Vue 3中，这个职责由vue-loader自动处理，但需要指定兼容Vue 3的版本）。
   ```bash
   npm install webpack webpack-cli webpack-dev-server vue-loader @vue/compiler-sfc css-loader vue-style-loader --save-dev
   # 或者
   yarn add webpack webpack-cli webpack-dev-server vue-loader @vue/compiler-sfc css-loader vue-style-loader --dev
   ```

注意：`vue-style-loader`用于将CSS注入到DOM中，而`css-loader`则允许你使用类似`@import`和`url(...)`这样的CSS功能。

3. **配置Webpack**：在项目根目录下创建`webpack.config.js`文件，这是Webpack的配置文件。以下是一个基本的配置示例，用于处理Vue文件、CSS文件以及启动开发服务器：

```javascript
   const path = require('path');
   const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
     mode: 'development',
     entry: './src/main.js', // 入口文件
     output: {
       path: path.resolve(__dirname, 'dist'), // 输出目录
       filename: 'bundle.js' // 输出文件名
     },
     module: {
       rules: [
         {
           test: /\.vue$/,
           loader: 'vue-loader'
         },
         {
           test: /\.css$/,
           use: [
             'vue-style-loader',
             'css-loader'
           ]
         }
       ]
     },
     plugins: [
       new VueLoaderPlugin()
     ],
     devServer: {
       contentBase: './dist',
       hot: true // 开启热更新
     },
     resolve: {
       extensions: ['.js', '.vue', '.json'] // 自动解析确定的扩展
     }
   };
   ```

这个配置文件指定了Webpack的入口文件、输出目录、如何处理不同类型的文件（通过loader），以及插件配置（如VueLoaderPlugin）和开发服务器设置。

#### 四、编写Vue 3组件和入口文件

1. **创建Vue组件**：在`src/components`目录下（如果没有，请先创建它）创建一个简单的Vue组件，例如`HelloWorld.vue`：

```vue
   <template>
     <div>
       <h1>{{ msg }}</h1>
     </div>
   </template>

2. **编写入口文件**：在`src`目录下创建`main.js`作为项目的入口文件，并引入Vue和上面创建的组件：

```javascript
   import { createApp } from 'vue';
   import HelloWorld from './components/HelloWorld.vue';

createApp(HelloWorld).mount('#app');
   ```

同时，在`public/index.html`（如果还没有，请创建）中指定Vue的挂载点：

```html
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vue 3 Webpack Project</title>
   </head>
   <body>
     <div id="app"></div>
     
     <script src="/dist/bundle.js"></script>
   </body>
   </html>
   ```

#### 五、运行和构建项目

1. **配置npm脚本**：在`package.json`的`scripts`部分添加Webpack的启动和构建命令：

```json
   "scripts": {
     "start": "webpack serve --open", // 启动开发服务器
     "build": "webpack --mode production" // 生产环境构建
   }
   ```

2. **启动开发服务器**：在项目根目录下运行`npm start`（或`yarn start`），Webpack将启动开发服务器，并自动打开浏览器显示你的Vue 3应用。

3. **构建生产版本**：当准备将应用部署到生产环境时，运行`npm run build`（或`yarn build`），Webpack将按照生产模式构建项目，并将输出文件放在`dist`目录下。

#### 六、总结

通过本章的学习，我们了解了如何使用Webpack从零开始搭建一个Vue 3项目的基础架构。从环境准备、项目初始化、依赖安装、Webpack配置到Vue组件和入口文件的编写，再到项目的运行和构建，每一步都为我们构建更复杂的Vue 3企业级应用打下了坚实的基础。随着项目的深入，你可能还需要引入更多Webpack的loader和plugin来满足不同的开发需求，但基本的流程和思路是相通的。希望本章的内容能为你的Vue 3开发之旅提供有力的支持。

该分类下的相关小册推荐：

Vue.js从入门到精通(一)

Vue源码完全解析

vue项目构建基础入门与实战

TypeScript和Vue从入门到精通(一)

Vue面试指南

TypeScript和Vue从入门到精通(三)

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(四)

VUE组件基础与实战

Vue3技术解密

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)