使用Webpack 搭建 Vue3 开发环境过程详解

使用Webpack搭建Vue3开发环境的过程可以分为以下几个步骤：

1.安装Webpack和Vue3依赖

在开始使用Webpack搭建Vue3开发环境之前，我们需要先安装Webpack和Vue3的相关依赖。

Webpack是一个打包工具，可以将多个JavaScript、CSS、HTML等文件打包成一个或多个JavaScript文件。在搭建Vue3开发环境时，我们需要使用Webpack来打包Vue3的代码。

安装Webpack可以使用npm命令行工具进行安装：

npm install webpack webpack-cli --save-dev

Vue3依赖使用npm命令行安装：

npm install vue@next --save

2. 配置Webpack

在安装完成Webpack和Vue3的相关依赖后，我们需要对Webpack进行配置，以实现对Vue3代码的打包。

在项目根目录下新建一个webpack.config.js文件，并添加以下代码：

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

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    })
  ]
};

上述代码中配置了Webpack的入口文件和输出文件夹、插件以及其他相关的配置项。其中，mode设置为development，表示开发模式；entry指定项目的入口文件；output指定打包后的文件输出路径和文件名；plugins是一个数组类型，里面包含多个插件，示例中添加了HtmlWebpackPlugin插件。

3. 配置Babel

由于Vue3代码是使用最新的ECMAScript语法编写的，在一些浏览器上可能无法正常运行。为了解决这个问题，我们需要对Vue3代码进行转换，将其转换成兼容性更好的ES5语法。

在安装完成Webpack和Vue3的相关依赖后，我们还需要安装Babel以将Vue3的代码转换成ES5语法。可以使用npm命令行进行安装：

npm install @babel/core @babel/preset-env babel-loader --save-dev

然后在webpack.config.js文件中添加如下代码：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: "babel-loader",
      exclude: /node_modules/,
      options: {
        presets: ["@babel/preset-env"]
      }
    }
  ]
}

上述代码中配置了Babel的转换规则，将所有.js文件转换成兼容性更好的ES5语法。

4. 配置Vue3

最后，我们还需要配置Vue3的引入和使用。我们可以在项目根目录下的index.html文件中添加Vue3的引用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Webpack Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>
</html>

并在src/main.js文件中添加以下代码：

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

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

上述代码中，我们使用createApp函数创建一个Vue实例，并将其挂载到id为app的DOM元素上。同时，我们还要确保App.vue文件已经创建。

示例一

一个完整的Webpack+Vue3示例代码如下，可供参考：

webpack.config.js:

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

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-env"]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
};

App.vue

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style>
h1 {
  font-size: 4em;
  text-align: center;
  color: #42b983;
}
</style>

main.js

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

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

package.json

{
  "name": "vue3-webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-env": "^7.12.16",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.1.0",
    "vue-loader": "^16.0.0-beta.5",
    "webpack": "^5.21.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "vue": "^3.0.5"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Webpack Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>
</html>