使用 webpack5 搭建 vue3 项目-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，使用 webpack 搭建项目已经成为了一种标配。随着 webpack 的不断更新迭代，webpack5 已经发布，为我们提供了更加强大的功能。而随着 vue3 的正式发布，我们也需要使用 webpack5 来搭建 vue3 项目。本文将详细介绍如何使用 webpack5 搭建 vue3 项目，包括安装、配置、打包等步骤，并提供示例代码。

安装

首先我们需要安装 webpack5 和 vue3，可以使用 npm 或者 yarn 进行安装。

# 安装 webpack5
npm install webpack webpack-cli webpack-dev-server --save-dev

# 安装 vue3
npm install vue@next

配置

webpack.config.js

在项目根目录下创建 webpack.config.js 文件，进行 webpack 配置。我们需要配置入口、输出、模块、插件等选项。

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: 'Vue3 Project'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

我们使用 vue-loader 处理 .vue 文件，使用 babel-loader 处理 .js 文件。同时使用 HtmlWebpackPlugin 插件生成 HTML 文件。

babel.config.js

在项目根目录下创建 babel.config.js 文件，进行 babel 配置。我们需要使用 @babel/preset-env 来转换 ES6+ 语法。

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: 'defaults' }]
  ]
};

package.json

在 package.json 文件中，我们需要配置一些 npm 脚本，方便启动开发服务器和打包项目。

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

打包

在终端中执行以下命令，启动开发服务器。

npm start

在终端中执行以下命令，打包项目。

npm run build

示例代码

src/main.js

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

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

src/App.vue

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue3',
      message: 'Welcome to my Vue3 project'
    };
  }
};
</script>

public/index.html

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

总结

本文详细介绍了如何使用 webpack5 搭建 vue3 项目，包括安装、配置、打包等步骤，并提供了示例代码。通过本文的学习，我们可以更加深入地了解 webpack5 和 vue3 的使用，为我们的前端开发提供更加强大的支持。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657ad113d2f5e1655d54c52c