Vue webpack config for Wordpress or any other custom project

package.json

{
    "name": "vue-webpack-config",
    "version": "0.0.0",
    "private": true,
    "eslintConfig": ".eslintrc.js",
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack --watch",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules -p",
        "clean:modules": "rm -rf ./node_modules"
    },
    "postcss": {
        "plugins": {
            "autoprefixer": {}
        }
    },
    "browserslist": [
        "> 5%",
        "last 2 versions",
        "not ie < 11",
        "not dead"
      ],
    "devDependencies": {
        "@babel/core": "^7.7.4",
        "@babel/preset-env": "^7.7.4",
        "babel-loader": "^8.0.5",
        "cross-env": "^5.2.1",
        "css-loader": "^3.2.1",
        "eslint": "^5.16.0",
        "file-loader": "^5.0.2",
        "mini-css-extract-plugin": "^0.8.0",
        "node-sass": "^4.13.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.3.1",
        "style-loader": "^1.0.1",
        "vue-loader": "^15.7.2",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10"
    },
    "dependencies": {
        "@babel/polyfill": "^7.7.0",
        "autoprefixer": "^9.7.3",
        "core-js": "^3.4.7"
    }
}

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const devMode = process.env.NODE_ENV !== 'production';

const wpPath = (folder, subfolder = '') => {
    const theme = path.basename(path.resolve('./'));
    return `${subfolder}/wp-content/themes/${theme}/${folder}`;
};

const entry = {
    js: './src/app/index.js',
};

const output = {
    js: 'public/build/app.js?[hash]',
    css: 'public/build/app.css?[hash]',
    // filesystem path where the target file(s) will be placed
    assetsOutputPath: 'public/build',
    // custom public path for the target file(s)
    assetsPublicPath: devMode
        ? wpPath('/public/build', '/myproject') // http://localhost/myproject/
        : wpPath('public/build'),
};

module.exports = {
    entry: [entry.js],
    output: {
        path: path.resolve(__dirname),
        filename: output.js,
        publicPath: '/',
    },
    mode: devMode ? 'development' : 'production',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    useBuiltIns: 'usage',
                                    corejs: '3.0',
                                },
                            ],
                        ],
                    },
                },
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: output.assetsOutputPath,
                            publicPath: output.assetsPublicPath,
                            name: '[name].[ext]?[hash]',
                        },
                    },
                ],
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    optimizeSSR: false,
                },
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: output.css,
        }),
        new VueLoaderPlugin(),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/app'),
            '@@': path.resolve(__dirname, 'src'),
        },
        extensions: ['.js', '.vue', '.json'],
    },
};