Skip to content

Instantly share code, notes, and snippets.

@WhereJuly
Last active December 11, 2020 11:56
Show Gist options
  • Save WhereJuly/86472a8a90a993273c1b72339aa882d6 to your computer and use it in GitHub Desktop.
Save WhereJuly/86472a8a90a993273c1b72339aa882d6 to your computer and use it in GitHub Desktop.
// 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();
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment