Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).
Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).
Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:
|
1 2 3 |
yarn add twig-html-loader --save yarn add html-webpack-plugin --save yarn add fs --save |
webpack.config.js:
|
1 2 3 4 |
const Encore = require('@symfony/webpack-encore'); [...] const HtmlWebpackPlugin = require('html-webpack-plugin'); const fs = require('fs'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// 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, })) ); |
|
1 2 3 4 5 6 7 8 |
Encore [...] .addLoader({ test: /\.twig$/, type: 'asset/source', loader: 'twig-html-loader' }) ; |
Résultat:
Fichiers source:
Fichiers destination:
