Add custom vanilla javascript functions to webpack-encore workflow configuration

Question

You'll find alot of ressources about setting up "vanilla" webpack configurations to suit your needs on the internet. However, I'm having a hard time adapting those "vanilla" webpack solutions for use with webpack-encore!

Here's an example with configuring webpack to generate HTML assets out of TWIG/JSON source files.

So far, I managed to make it work by using webpack-encore's .addLoader() and .addPlugin() built-in methods. But there's a huge caveat: my adaptation is pretty much static as I have to manually declare a new plugin for each TWIG page I want to be rendered as HTML:

Encore
[...]
    .addLoader({
        test: /\.twig$/,
        type: 'asset/source',
        loader: 'twig-html-loader'
    })
    .addPlugin(new HtmlWebpackPlugin({
        title: 'Index',
        filename: '../html/index.html',
        template: './assets/twig/index.twig',
        publicPath: '../build/'
    }))
    .addPlugin(new HtmlWebpackPlugin({
        title: 'Bio',
        filename: '../html/pages/bio.html',
        template: './assets/twig/bio.twig',
        publicPath: '../../build/'
    }))
;

"vanilla" webpack configuration's sample is much better as the author wrote and made use of two custom functions that recursively read through the main twig directory and make a list of the templates in all the folders, keeping the paths intact and excluding all the template files.

He then passes his custom "htmlPlugins" immediately invoqued function to the whole module.exports = { module.plugins } webpack configuration tree as an argument of the .concat() method.

This is my very first experience with webpack/webpack-encore and I have absolutely no clue about how to use those vanilla javascript "walk" and "htmlPlugins" function with webpack-encore.

Any help, even keywords to guide me to new Google searches paths, would be greatly appreciated. Thanks!

I needed to do this kind of code, but with webpack-encore instead of classic webpack: https://stackoverflow.com/a/63385300/1662176 — frontenddeveloper.0fees.net, May 26 '21 at 15:48

score 0 · Answer 1 · answered May 27 '21 at 07:00

Ok, I've figured it out myself.

// create a list of twig files to generate
// filter out anything that starts with an underscore or is not a twig file
function walk(dir) {
    let results = [];
    const list = fs.readdirSync(dir);
    list.forEach(file => {
        file = `${dir}/${file}`;
        const stat = fs.statSync(file);
        if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) {
            /* Recurse into a subdirectory */
            results = results.concat(walk(file));
        } else if (
            stat &&
            !stat.isDirectory() &&
            path.extname(file) === '.twig' &&
            path.basename(file).indexOf('_') !== 0
        ) {
            /* Is a file */
            results.push(file);
        }
    });
    return results;
}

//start looking in the main twig folder
const files = walk('./assets/twig');

// generate html plugins to export
const htmlPlugins = files.map(
    file =>
        // Create new HTMLWebpackPlugin with options
        Encore.addPlugin(new HtmlWebpackPlugin({
            filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'),
            template: path.resolve(__dirname, file),
            publicPath: '../build/',
            hash: true,
        }))
);

Add custom vanilla javascript functions to webpack-encore workflow configuration

1 Answers1