从零开始使用 Webpack 构建 Vue 3 + TypeScript 开发环境

导语

在 Vue.js 开发中，Webpack 是一种流行的构建工具，它可以帮助我们管理项目中的各种资产，例如 JavaScript、CSS 和图像。结合 TypeScript，我们可以增强我们的代码，使其更加强大和易于维护。本文将指导您使用 Webpack 从头开始设置一个 Vue 3 + TypeScript 开发环境。

先决条件

• Node.js 16 或更高版本
• npm 或 yarn 包管理器

步骤 1：创建新项目

• 创建一个新目录，并将它作为您的项目根目录。
• 运行以下命令初始化 npm 项目：

npm init -y

• 或者使用 yarn：

yarn init -y

步骤 2：安装 Webpack 和 TypeScript

• 使用 npm 或 yarn 安装 Webpack 和 TypeScript：

npm install --save-dev webpack webpack-cli typescript @vue/cli-plugin-typescript

• 或者使用 yarn：

yarn add --dev webpack webpack-cli typescript @vue/cli-plugin-typescript

步骤 3：创建 webpack.config.js 文件

• 在项目根目录下创建 webpack.config.js 文件。
• 在此文件中，我们将配置 Webpack 构建设置：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

• mode：设置为 "development" 以启用开发模式。
• entry：指定应用程序的入口文件。
• output：指定输出目录和文件名。
• resolve：指定文件扩展名。
• module：配置 TypeScript 加载器。

步骤 4：创建 TypeScript 配置文件

• 在项目根目录下创建 tsconfig.json 文件。
• 在此文件中，我们将配置 TypeScript 编译器设置：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "./dist",
  }
}

• target：指定编译目标。
• module：指定模块类型。
• moduleResolution：指定模块解析策略。
• rootDir：指定 TypeScript 文件的根目录。
• outDir：指定编译后的输出目录。

步骤 5：创建 Vue.js 应用程序

• 在 src 目录下创建 main.ts 文件。
• 在此文件中，我们将创建我们的 Vue 3 应用程序：

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

• App.vue 文件将包含我们的 Vue 组件：

<template>
  <h1>Hello Vue 3 + TypeScript!</h1>
</template>

<script>
export default {
  name: "App",
};
</script>

步骤 6：构建项目

• 在项目根目录下运行以下命令构建项目：

webpack

• 或者使用 yarn：

yarn webpack

结论

我们已经成功设置了一个使用 Webpack 和 TypeScript 的 Vue 3 开发环境。通过遵循这些步骤，您可以构建健壮且可维护的 Vue 应用程序。如果您有任何问题或需要进一步说明，请随时在评论区留言。