我们日常Vue项目都是用cli脚手架来配置的，要不是@vue/cli，或者是vite帮我们构建好的，但是还是有必要了解其中的原理，了解从0开始如何配置和搭建项目。

此处记录基于Webpack5来配置和搭建Vue项目的过程：

1. 配置入口和出口文件
2. 用vue-loader和VueLoaderPlugin插件来处理vue文件
3. 用style-loader和css-loader处理css文件
4. 利用webpack资源模块配置静态资源
5. 用HtmlWebpackPlugin来指定html模板
6. 后续优化配置文件

/**
 * 参考：[webpack5 + vue3 从零配置项目](https://juejin.cn/post/7056398225095262245)
 */
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: {
    path: "./src/main.js",
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: "asset/resource",
        generator: {
          filename: "assets/img/[name][hash][ext]",
        },
      },
    ],
  },
  output: {
    filename: "assets/js/[name].[contenthash:6].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"),
    }),
    new CleanWebpackPlugin(),
    new DefinePlugin({
      __VUE_PROD_DEVTOOLS__: false,
      __VUE_OPTIONS_API__: false,
    }),
  ],
};