Webpack5 零配置基础 Vue 项目 - 详细指南

前端

2024-01-09 10:59:52

Webpack5 从零配置一个基础的 Vue 项目

作为一名初学者或者中级前端开发者，想要深入学习并实践 Webpack 5 和 Vue 3 来构建前端项目，那么本文将提供一个详细的从零开始配置基础 Vue 项目的指南，帮助你一步步理解和掌握整个流程。

前期准备

在开始之前，确保你已经安装了 Node.js 和 npm。

项目结构

我们首先创建一个新的项目目录，并将它命名为 "my-vue-project"。然后在该目录下创建以下子目录：

src/
node_modules/
package.json
webpack.config.js

安装依赖项

在项目根目录下，使用 npm 安装必要的依赖项：

npm install vue@3 vue-loader@15 webpack@5 webpack-cli@4

配置 Webpack

接下来，我们需要创建一个 Webpack 配置文件。在项目根目录下创建一个名为 "webpack.config.js" 的文件，并添加以下内容：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};