1. cnpm i vue vue-loader vue-template-compiler -S
    //App.vue
<template>
    <div>
        hello
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>

</style>

    //main.js
import App from './App.vue'
import Vue from 'vue'
new Vue({
    render:h=>h(App)
}).$mount("#app");

    //webpack.config.js
const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const {VueLoaderPlugin} = require("vue-loader")
const config ={
    entry:path.resolve(__dirname,'src/main.js'), // 入口文件
    output:{
        path:path.resolve(__dirname,'dist'),     // 出口文件
        filename:'[hash]-[name]-bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:['style-loader','css-loader']
            },
            {
                test:/\.vue$/i,
                loader:'vue-loader'
            },
            {
                test:/\.(png|jpg|svg|gif|jpeg)$/i,
                type:"asset/resource"
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'workpack',
            template:path.resolve(__dirname,"public/index.html")
        }),
        new CleanWebpackPlugin(),
        new VueLoaderPlugin()
    ],
    devtool:"inline-source-map",
    devServer:{
        contentBase: './dist',
        port:8000
    },
    mode:'development'    // 模式
}
module.exports = config;

    //pubilc>index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>