Vue CLI + Twig templates vue.config.js

// The issue solved with this config is `twig-loader` and Webpack process the image assets
// referenced in `.twig` templates the correct way.

// Namely as a build process result, the images are copied to `.dist` folder with hashed names, 
// the `src` images' attributes in the output HTML file produced from the Twig templates
// are updated with the respective hashed names.

module.exports = {
    runtimeCompiler: true,
    outputDir: '.dist',
    pages: {
        main: {
            // This is for JS files, not a point of concern here.
            entry: 'src/js/main.js',

            // This is the entry point Twig template. Webpack takes it as a starting point
            // to compile all the dependent Twig templates.

            template: 'src/views/pages/index.twig',
            // Compiled Twig templates will be output as `.dist/index.html`. 
            // As well see the `outputDir` above.
            filename: 'index.html',
        }
    },

    // Here is where the fix actually is made.
    // We create the module rule called `twig` and assign 3 loaders to it.
    // I did not check but I suspect their order may be important.
    // The loaders should be installed first with `npm install` command.
    chainWebpack: config => {
        config.module
            .rule('twig')
            .test(/\.twig$/)

            .use('twig-loader')
            .loader('twig-loader')
            .end()

            .use('extract-loader')
            .loader('extract-loader')
            .end()
            
            .use('html-loader')
            .loader('html-loader')
            .end();
    }

};