使用 webpack 5 从头开始配置 Vue 3 项目

前端

2024-02-04 10:53:04

导言

webpack 是一个流行的 JavaScript 模块捆绑器，用于构建前端 Web 应用程序。它使开发人员能够模块化他们的代码，并将其捆绑到一个或多个优化过的文件，以提高应用程序的性能和可维护性。

Vue 3 是一个流行的渐进式 JavaScript 框架，用于构建用户界面。它提供了一组强大的工具和功能，使开发人员能够快速轻松地创建交互式且响应式的前端应用程序。

本教程将引导您从头开始配置一个使用 webpack 5 作为构建工具的 Vue 3 项目。我们将探讨 webpack 5 的核心概念，并了解如何利用其功能来优化 Vue 3 应用程序的构建过程。

先决条件

在开始之前，您需要确保您的系统满足以下先决条件：

Node.js（版本 14 或更高）
npm（版本 6 或更高）
Vue CLI（版本 4 或更高）（可选，推荐）

项目初始化

首先，让我们创建一个新的 Vue 3 项目。如果您已安装 Vue CLI，可以使用以下命令：

vue create vue3-webpack5

如果您更喜欢从头开始，可以使用以下步骤手动创建项目：

创建一个新目录，例如 vue3-webpack5。
在该目录中，使用 npm 初始化一个新的项目：

npm init -y

安装 Vue 3 和其他必要的依赖项：

npm install vue@3

配置 webpack

接下来，我们需要配置 webpack。为此，创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

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: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [],
  devServer: {
    contentBase: './dist',
    port: 8080
  }
};