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的包管理工具，用于安装和管理项目依赖。

安装Node.js：访问Node.js官网下载并安装适合你操作系统的版本。
检查Node.js和npm版本：在终端或命令提示符中运行node -v和npm -v来确认安装成功及版本信息。

二、初始化项目

创建项目文件夹：在合适的位置创建一个新的文件夹作为你的Vue 3项目目录，例如vue3-webpack-project。
初始化npm项目：在项目文件夹中打开终端或命令提示符，运行npm init -y（或yarn init -y如果你使用yarn）来快速生成package.json文件。这个文件将用于管理项目的依赖、脚本等信息。

三、安装Vue 3和Webpack

安装Vue 3：虽然Webpack本身不直接依赖Vue，但我们需要Vue 3作为项目的核心框架。运行以下命令安装Vue 3：
```
npm install vue@next --save
# 或者如果你使用yarn
yarn add vue@next
```
安装Webpack及其核心依赖：Webpack本身及其核心插件（如webpack-cli）是必需的。同时，为了支持Vue文件的编译，我们需要vue-loader和vue-template-compiler（在Vue 3中，这个职责由vue-loader自动处理，但需要指定兼容Vue 3的版本）。
```
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功能。

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

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组件和入口文件

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

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello, Vue 3 with Webpack!'
    }
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

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

import { createApp } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
createApp(HelloWorld).mount('#app');

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

<!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>
  <!-- 引入打包后的JS文件 -->
  <script src="/dist/bundle.js"></script>
</body>
</html>

五、运行和构建项目

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

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

启动开发服务器：在项目根目录下运行npm start（或yarn start），Webpack将启动开发服务器，并自动打开浏览器显示你的Vue 3应用。
构建生产版本：当准备将应用部署到生产环境时，运行npm run build（或yarn build），Webpack将按照生产模式构建项目，并将输出文件放在dist目录下。

六、总结

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