Webpack5 基础 & Vue3 项目搭建指南

使用 Webpack 5 和 Vue 3 构建你的第一个前端应用程序

创建项目

1. 创建一个新文件夹，如 "my-webpack-vue-app"。
2. 初始化一个新的 npm 项目：npm init -y。
3. 安装必要的依赖项：npm install webpack webpack-cli webpack-merge webpack-dev-server vue vue-loader vue-template-compiler。

配置构建工具

1. 创建一个 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: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
      },
    }),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};

开发应用程序

1. 创建一个 src 文件夹，并在其中创建 main.js 文件：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

2. 创建 App.vue 文件：

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

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

<style>
#app {
  font-family: 'Avenir', 'Helvetica', 'Arial', sans-serif;
}
</style>

构建和部署应用程序

1. 构建应用程序：npm run build。
2. 本地运行应用程序：npm run dev。

结论

本指南向你展示了如何使用 Webpack 5 和 Vue 3 构建一个基本的应用程序。你可以使用这些步骤来构建更复杂的前端应用程序。

常见问题解答

• 什么是 Webpack？
  Webpack 是一个模块打包器，用于优化和构建前端资源。
• 什么是 Vue？
  Vue 是一个用于构建用户界面的 JavaScript 框架。
• 如何安装 Webpack 和 Vue？
  使用 npm install webpack webpack-cli webpack-merge webpack-dev-server vue vue-loader vue-template-compiler。
• 如何构建应用程序？
  运行 npm run build。
• 如何本地运行应用程序？
  运行 npm run dev。