关于javascript: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"}
}