零基础入门Vue3-Webpack5搭建模板（三）：进一步的优化与完善

前端

2023-10-22 07:12:59

前言

在上一篇文章中，我们对配置进行了抽离和优化，使之更加清晰和易于维护。在这篇文章中，我们会进一步的完善和优化我们的template,这一篇文章的代码可以在vue3-webpack5-templatetag1.0.0中看到

抽离和优化配置

在上一篇文章中，我们将配置抽离成了一个单独的文件，并对配置进行了优化。在这篇文章中，我们会进一步的优化配置，使之更加简洁和易于理解。

首先，我们将把配置中的部分内容移动到.env文件中。.env文件是一个环境变量配置文件，它可以用来存储一些敏感信息，比如数据库密码、API密钥等。这样可以使我们的配置更加安全和易于维护。

其次，我们将把配置中的部分内容移动到package.json文件中。package.json文件是项目的配置文件，它可以用来存储一些项目相关的信息，比如项目的名称、版本、作者等。这样可以使我们的配置更加集中和易于管理。

最后，我们将对配置中的部分内容进行优化，使之更加简洁和易于理解。比如，我们将把配置中的部分内容移动到注释中，使之更加清晰和易于阅读。

使用tag来管理模板

在上一篇文章中，我们介绍了如何使用tag来管理模板。在这篇文章中，我们会进一步的完善和优化tag的使用。

首先，我们将把tag的名称改为更加简洁和易于理解的名称。比如，我们将把"build"tag的名称改为"prod"。

其次，我们将把tag的改为更加详细和易于理解的。比如，我们将把"build"tag的描述改为"生产环境构建"。

最后，我们将把tag的使用范围扩大到整个项目。比如，我们将把"build"tag用于构建整个项目，而不是只用于构建某个模块。

使用脚本来自动化构建过程

在上一篇文章中，我们介绍了如何使用脚本来自动化构建过程。在这篇文章中，我们会进一步的完善和优化脚本的使用。

首先，我们将把脚本的名称改为更加简洁和易于理解的名称。比如，我们将把"build"脚本的名称改为"prod"。

其次，我们将把脚本的内容改为更加详细和易于理解的内容。比如，我们将把"build"脚本的内容改为"构建整个项目，并将其输出到dist文件夹"。

最后，我们将把脚本的使用范围扩大到整个项目。比如，我们将把"build"脚本用于构建整个项目，而不是只用于构建某个模块。

完整的代码示例

以下是一个完整的代码示例，供读者参考和学习。

// .env文件

NODE_ENV=development

// package.json文件

{
  "name": "vue3-webpack5-template",
  "version": "1.0.0",
  "author": "Your Name",
  "scripts": {
    "dev": "webpack serve --open",
    "build": "webpack --mode production",
    "prod": "webpack --mode production --output-filename=[name].[contenthash].js"
  }
}

// webpack.config.js文件

const path = require("path");

module.exports = {
  mode: process.env.NODE_ENV,
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        loader: ["style-loader", "css-loader"]
      }
    ]
  },
  plugins: [],
  devServer: {
    open: true
  }
};

// src/main.js文件

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

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

// App.vue文件

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

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

<style>
h1 {
  color: red;
}
</style>