从 0 配置 webpack 5 + Vue 3 项目

前端

2024-01-30 07:16:34

当然，以下是如何从 0 开始配置一个 webpack 5 + Vue 3 项目的步骤：

1. 安装必要的工具

首先，您需要安装 Node.js 和 npm，因为 webpack 和 Vue 都是使用 JavaScript 编写的。您可以在 Node.js 网站上找到下载链接。

2. 创建项目目录

接下来，创建一个新的项目目录，并切换到该目录。

3. 初始化项目

在项目目录中，运行以下命令来初始化一个新的 npm 项目：

npm init -y

4. 安装 webpack 和 Vue 3

接下来，使用 npm 安装 webpack 和 Vue 3：

npm install webpack webpack-cli webpack-dev-server vue@3 -D

5. 创建 webpack 配置文件

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

const path = require('path');

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: [],
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 8080,
  },
};

6. 创建 src/main.js 文件

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

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

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

7. 创建 src/App.vue 文件

在项目目录中，创建一个名为 src/App.vue 的文件，并添加以下内容：

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

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

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