webpack配置vue3项目 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() ] }

【webpack配置vue3项目】新建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" } }