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.
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!
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, })) );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.