Vue3 Webpack Config

vue3-webpack.config.js

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/dist/plugin').default;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

const isProd = process.env.NODE_ENV === 'production';

const resolvePath = (...args) => path.resolve(path.join(__dirname, ...args));

module.exports = {
    entry: {
        main: {
            import: './frontend/main.js',
            dependOn: 'vendor',
        },
        vendor: ['vue'],
    },

    output: {
        filename: isProd ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
        path: resolvePath('public', 'assets'),
        publicPath: '/assets/',
    },

    devtool: isProd ? 'source-map' : 'cheap-module-source-map',

    resolve: {
        alias: {
            '@': resolvePath('frontend'),
            'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
        },
        extensions: [
            '.js',
            '.json',
            '.vue',
        ],
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                )
            },
            {
                test: /\.css$/,
                use: [
                    isProd ? MiniCssExtractPlugin.loader : 'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: { importLoaders: 1 },
                    },
                    'postcss-loader',
                ],
            }
        ],
    },

    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: isProd ? '[name].[contenthash].bundle.css' : '[name].bundle.css',
        }),
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false,
        }),
        new ManifestPlugin({
            writeToFileEmit: true,
        }),
    ],
};

This webpack config kinda assumes the structure where you want to output your assets to a /public/assets dir relative to your webpack config (e.g. you're working with a framework like laravel or rails)