That’s from htmlWebpackPlugin
htmlWebpackPlugin allows you to control files that are injected in html if you want, it uses ejs syntax by default, hence those <% %>
tags, you can type <%= htmlWebpackPlugin.files %>
to see what’s inside of the files variable.
Pretty much it contains all your pages defined in webpack.config.js file at the end of a file like so
You can also use webpack variable there, it might be handy for some cases, but i don’t know which exactly
const pages = [
parts.page({
title: 'Index page',
template: path.resolve(`${__dirname}/../server/views/templates/index.hbs`),
filename: path.resolve(`${__dirname}/../server/views/index.hbs`),
entry: {
app: PATHS.app
},
chunks: ['app', 'manifest', 'vendor'].concat(reactDevtoolsChunk),
minify: env === 'development' ? false : minifyOptions,
env
})
]
Don’t forget to change chunks and entry. For this page i provide app entry and also explicitly provide chunks that i want to include in hbs file.
I use this multipage setup because i don’t want to import my whole react project in one hbs file and then manage inside it which page exactly should i render for such places like admin pages and sections in issues, i think it’s better to have multiple pages for that, then include react part just for that case, this pages refreshes between them anyway, so less code to load, less pain to manage.
If you need only one page that’s okay too, you just keep one page inside an array
Maybe better approach for managing multiple pages, especially if you’re going for a huuuuge app is to make different configs for each page and build them in parallel, but that’s an optimisation for a really big projects, i bet they would make even better setup then what i have
Also it might be unnecessary to use furl in hbs file (that’s a helper function provided by ACE to fingerprint static resources url) since we already adding hashes to our static resources