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