Craft Cloud + Laravel Mix + Twigpack

twigpack.php

<?php

use craft\helpers\App;

return [
    // Global settings
    '*' => [
        // If `devMode` is on, use webpack-dev-server to all for HMR (hot module reloading)
        'useDevServer' => false,
        // Enforce Absolute URLs on includes
        'useAbsoluteUrl' => true,
        // The JavaScript entry from the manifest.json to inject on Twig error pages
        // This can be a string or an array of strings
        'errorEntry' => '',
        // String to be appended to the cache key
        'cacheKeySuffix' => '',
       // Manifest file names
        'manifest' => [
            'legacy' => 'mix-manifest.json',
            'modern' => 'mix-manifest.json',
        ],
        // Public server config
        'server' => [
            'manifestPath' => \craft\cloud\Helper::artifactUrl('/') ?: '@webroot/',
            'publicPath' => \craft\cloud\Helper::artifactUrl('dist/'),
        ],
        // webpack-dev-server config
        'devServer' => [
            'manifestPath' => 'http://localhost:8080/',
            'publicPath' => 'http://localhost:8080/',
        ],
        // Bundle to use with the webpack-dev-server
        'devServerBuildType' => 'modern',
        // Whether to include a Content Security Policy "nonce" for inline
        // CSS or JavaScript. Valid values are 'header' or 'tag' for how the CSP
        // should be included. c.f.:
        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script
        'cspNonce' => '',
    ],
    // Live (production) environment
    'live' => [
    ],
    // Staging (pre-production) environment
    'staging' => [
    ],
    // Development environment
    'dev' => [
        // If `devMode` is on, use webpack-dev-server to all for HMR (hot module reloading)
        'useDevServer' => false,
    ],
];

webpack.mix.js

require('dotenv').config();
let mix = require('laravel-mix');
var tailwindcss = require('tailwindcss');

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
});

mix.setPublicPath('web')
    .js(['src/js/app.js'], 'web/dist/app.js')
    .extract()
    .vue({ version: 2 })
    .sass('src/scss/app.scss', 'dist/app.css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('tailwind.config.js')],
    })
    .copy('src/fonts', 'web/dist/fonts')
    .options({
        fileLoaderDirs: {
            fonts: 'fonts',
        },
    })
    .sourceMaps()
    .override(function(webpackConfig) {
        const artifactBaseUrl = process.env.CRAFT_CLOUD_ARTIFACT_BASE_URL;

        if (artifactBaseUrl) {
            webpackConfig.output.publicPath = artifactBaseUrl;
        }

        return webpackConfig;
    });

module.exports = {
    resolve: {
        alias: {
            jQuery: 'jquery',
        },
    },
};

mix.browserSync({
    proxy: process.env.PRIMARY_SITE_URL,
    open: false,
    files: ['web/dist/*.css', 'web/dist/*.js', 'templates/**/*.twig'],
});

if (mix.inProduction()) {
    mix.version();
}