matejsvajger / laravel-mix-pug

Laravel Mix Plugin for compiling Pug/Jade templates.
MIT License
21 stars 23 forks source link

Laravel Mix mix-manifest.json support #18

Open sebszocinski opened 3 years ago

sebszocinski commented 3 years ago

Hey does anyone know how to reference the mix-manifest.json file inside a pug file? The docs for it apply to html or blade so I assume we need some magic here?

matejsvajger commented 3 years ago

You can attach it to the locals object in you build config:

mix.pug('src/*.pug', 'dist', {
    locals: {
        manifest: require('mix-manifest.json')
    }
});

and access it in your pug file something like this:

script(src=`{manifest['/js/app.js']}`)

Hope this helps!

sebszocinski commented 3 years ago

Hey @matejsvajger thanks! I tried that but I can't seem to be able to reference mix-manifest.json, I keep getting this error:

[webpack-cli] Error: Cannot find module 'mix-manifest.json'

My mix config is below (Laravel app):

mix.js('resources/js/_app.js', 'public/js').vue()
    .sass('resources/sass/_vendor.sass', 'css')
    .sass('resources/sass/_app.sass', 'css')
    .pug('resources/pug/**/*.pug', 'resources/views', {
        ext: '.antlers.html',
        excludePath: 'resources/pug',
        locals: {
            manifest: require('mix-manifest.json')
        }
    })
    .tailwind()
    .webpackConfig({
        module: {
            rules: [{
                test: /\.pug$/,
                oneOf: [
                    {
                        resourceQuery: /^\?vue/,
                        use: ['pug-plain-loader']
                    }
                ]
            }]
        }
    })
    .setPublicPath('public')
    .env(process.env.ENV_FILE)
    .browserSync(browserSyncOptions)
    .disableSuccessNotifications();

I can see my mix-manifest.json file is being written to my public folder so I tried referencing that but nothing worked.

sebszocinski commented 3 years ago

Hey @matejsvajger ok I got it building with manifest: require('./public/mix-manifest.json') but the script source doesn't seem to work in the pug file using:

script(src=`{manifest['/js/_app.js']}`)

The output in browser is like this: image