webpack配置vue3项目

npm init
npm i css-loader style-loader vue-loader webpack webpack-cli -D
npm i vue@latest
新建webpack.config.js

/**
 * @Author: ZHIWEI
 * @Description: webpack.config
 * @Date: 2022/3/9 15:48
 */
let path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    mode: 'production',
    entry: './dyMethods.js',
    output: {
        filename: 'dyMethods.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    reactivityTransform: true
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

新建app.js

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

 createApp(App).mount(#app)

package.json

{
  "name": "side-bar-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "zhiwei",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "vue": "^3.2.31"
  }
}