vue-wp/vue-theme/webpack.config.js

const path = require('path')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const CompressionPlugin = require('compression-webpack-plugin')

const PostCssPlugins = [
    require('postcss-import'),
    require('precss'),
    require('autoprefixer')
]

module.exports = (env = {}) => {
    return {
        mode: env.production ? 'production' : 'development',
        resolve: {
        alias: {
                '@': path.resolve(__dirname, 'src'),
                'vue$': 'vue/dist/vue.esm.js'
            },
            extensions: ['*', '.js', '.sss', '.vue', '.json']
        },
        module: {
            rules: [{
                    test: /\.vue$/,
                    use: ['vue-loader']
                },
                {
                    test: /\.(js)$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.pug$/,
                    oneOf: [
                        // this applies to `<template lang="pug">` in Vue components
                        {
                            resourceQuery: /^\?vue/,
                            use: ['pug-plain-loader']
                        }
                    ]
                },
                {
                    test: /\.(png|jpg|gif|svg|ttf|woff2|woff)$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: '[name].[ext]?[hash]'
                    }
                },
                {
                    test: /(\.html$|favicon)/,
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]'
                    }
                },
                {
                    test: /\.(css|sss|postcss)$/,
                    use: [{
                            loader: 'vue-style-loader'
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                parser: 'sugarss',
                                plugins: () => {
                                    return PostCssPlugins
                                }
                            }
                        }
                    ]
                }
            ]
        },
        output: {
            path: path.join(__dirname, 'build'),
            publicPath: '/build/'
        },
        // https://github.com/Tech-Nomad/wue-theme
        devServer: {
            publicPath: "/build/",
            https: false,
            inline: true,
            noInfo: false,
            historyApiFallback: true,
            hot: true,
            open: true,
            hotOnly: true,
            disableHostCheck: true,
            writeToDisk: true,
            proxy: {
                '/': {
                    target: "http://localhost:8080",
                    secure: false,
                    changeOrigin: true,
                    autoRewrite: true,
                    headers: {
                        'X-ProxiedBy-Webpack': true,
                    },
                },
            },
        },
        devtool: env.production ? false : 'cheap-module-eval-source-map',
        plugins: [
            new webpack.DefinePlugin({
                PRODUCTION: JSON.stringify(env.production)
            }),
            new VueLoaderPlugin(),
            new CompressionPlugin({ threshold: 8192 }),
            new webpack.HotModuleReplacementPlugin()
        ]
    }
}