从0搭建webpack5+vue3开发环境：深入了解构建工具的配置

前言

一直以来，我们都习惯于使用基于各种脚手架创建的项目进行开发，例如Vue CLI、Create React App等。这些脚手架为我们提供了开箱即用的开发环境，并对webpack等构建工具进行了预配置。然而，这也意味着我们对webpack的内部运作机制缺乏了解。

本文将从头开始，一步一步地演示如何使用webpack5和vue3构建一个完整的开发环境。我们将介绍webpack的核心概念，以及如何配置webpack以满足不同的需求。同时，您还将学习如何使用vue3来构建组件和应用程序。通过本教程，您将对webpack和vue3有更深入的了解，并能够在未来的项目中自信地使用它们。

搭建webpack5+vue3开发环境

1. 安装Node.js和NPM

首先，我们需要在计算机上安装Node.js和NPM。Node.js是一个JavaScript运行时环境，而NPM是Node.js的包管理器。您可以从Node.js官网下载并安装Node.js。安装完成后，您可以在命令行中键入以下命令来检查Node.js和NPM是否已安装成功：

node -v
npm -v

如果以上命令能够正常输出版本号，则说明Node.js和NPM已安装成功。

2. 创建项目文件夹

接下来，我们需要创建一个新的项目文件夹来存放我们的webpack和vue3项目。您可以使用以下命令来创建项目文件夹：

mkdir my-webpack-vue3-project
cd my-webpack-vue3-project

3. 初始化npm项目

在项目文件夹中，我们需要使用NPM来初始化一个新的npm项目。您可以使用以下命令来初始化npm项目：

npm init -y

此命令将创建一个名为package.json的文件，其中包含项目的基本信息。

4. 安装webpack

接下来，我们需要安装webpack。您可以使用以下命令来安装webpack：

npm install webpack webpack-cli -D

此命令将在项目中安装webpack和webpack-cli。webpack-cli是一个命令行工具，可以帮助我们使用webpack构建项目。

5. 安装vue3

接下来，我们需要安装vue3。您可以使用以下命令来安装vue3：

npm install vue@next -D

此命令将在项目中安装vue3。

6. 创建webpack配置文件

接下来，我们需要创建一个webpack配置文件。您可以使用以下命令来创建webpack配置文件：

touch webpack.config.js

此命令将在项目中创建一个名为webpack.config.js的文件。

7. 配置webpack

接下来，我们需要在webpack.config.js文件中配置webpack。您可以使用以下配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, 'dist'),
    port: 8080,
    open: true,
  },
};

此配置将告诉webpack如何将我们的源代码编译成可执行的JavaScript代码。

8. 创建入口文件

接下来，我们需要创建一个入口文件。您可以使用以下命令来创建入口文件：

touch src/main.js

此命令将在项目中创建一个名为main.js的文件。

9. 编写入口文件

接下来，我们需要在main.js文件中编写代码。您可以使用以下代码：

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

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

此代码将创建一个Vue实例并将其挂载到#app元素上。

10. 创建组件

接下来，我们需要创建一个组件。您可以使用以下命令来创建组件：

touch src/App.vue

此命令将在项目中创建一个名为App.vue的文件。

11. 编写组件

接下来，我们需要在App.vue文件中编写代码。您可以使用以下代码：

<template>
  <div id="app">
    <h1>Hello, world!</h1>
  </div>
</template>

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

此代码将创建一个名为App的组件，并在其中显示一段文字。

12. 运行webpack

接下来，我们需要运行webpack来编译我们的代码。您可以使用以下命令来运行webpack：

npm run dev

此命令将在开发模式下运行webpack。

13. 访问应用程序

最后，我们可以访问我们的应用程序了。您可以使用以下URL来访问应用程序：

http://localhost:8080

您应该可以看到一个页面，上面显示着"Hello, world!"。

结语

以上就是如何从头开始搭建webpack5+vue3开发环境的步骤。通过本教程，您应该对webpack和vue3有更深入的了解，并能够在未来的项目中自信地使用它们。