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: {
                vue: 'vue/dist/vue.esm-bundler.js',
                '@': path.resolve(__dirname, 'src'),
            },
            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: ['style-loader', 'css-loader', 'postcss-loader'],
                },
            ],
        },
        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: false,
            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),
                __VUE_OPTIONS_API__: true,
                __VUE_PROD_DEVTOOLS__: false
            }),
            new VueLoaderPlugin(),
            new CompressionPlugin({ threshold: 8192 }),
            new webpack.HotModuleReplacementPlugin(),
        ],
    }
}