从零配置 webpack 5 + Vue 3 项目：让构建过程易如反掌

2023-10-10 23:04:54

前言

在实际项目开发中，很少有机会从头开始配置一个新项目。通常，我们都会选择脚手架来完成重复性的工作，从而节省时间和精力。不过，对于想要深入理解构建过程的开发者来说，从零开始配置一个项目也是很有必要的。

本文将手把手指导你从头开始配置一个 webpack 5 + Vue 3 项目，并详细介绍每个步骤。通过本教程，你将了解 webpack 和 Vue 3 的基本概念，以及如何优化你的项目构建流程。

步骤 1：初始化项目

首先，使用以下命令初始化一个新的 npm 项目：

npx create-vue-app my-vue3-app --template bare

步骤 2：安装 webpack

接下来，安装 webpack 和其他必要的依赖项：

npm install webpack webpack-cli vue vue-loader @vue/compiler-sfc

步骤 3：创建 webpack 配置文件

在项目根目录中，创建一个名为 webpack.config.js 的文件，并添加以下内容：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
    ],
  },
};

步骤 4：创建 Vue 组件

在 src 目录下，创建一个名为 main.js 的文件，并添加以下 Vue 组件：

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, webpack and Vue 3!',
    };
  },
  template: `<h1>{{ message }}</h1>`,
});

app.mount('#app');