Question:
Having trouble configuring webpack
You need to have a dynamic HTML page in your project. Better to have it pre-rendered on the server. The framework itself: Adonis , but the standard template language in it is not so convenient ( edge – files). So I decided to use Pug .
The structure of the project itself is as follows: there is a source folder, in it there are folders for each page / component. After the webpack build , everything goes to the right places: public and views .
Everything except pictures. I still do not understand how to properly configure webpack so that it does not compile pug in html and change links in img src (in the case of JPG / JPEG / PNG, this is image/[name].[ext] , and in the case of SVG – icon/[name].svg ).
And in general: is it correct to use pug in this way ?
Or is it better to use it only during build?
I am currently using the following way:
I add the pug file to the webpack using: html-webpack-plugin , then I use the html-webpack-pug-plugin so that the link and the script pug- view are added to the file.
As far as I understand, you need to configure the loader , such a construction:
{
test: /\.pug$/,
loaders: ['html-loader', 'pug-html-loader']
}
works, but at the output I get a file with a default HTML template.
Answer:
There was a solution: https://www.npmjs.com/package/pug-asset-loader With this plugin, it is possible to process pug files using the pal(<PATH>) function for the relative path, which will be replaced after build.