Here is how my file structure looks:
/public
(files ignored by git)
/src
index.js
/views
index.pug
server.js
webpack.config.js
index.pug
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/public/style.css" rel="stylesheet" />
script.
var LANGUAGES = '#{languages}';
</head>
<body>
<div id="body"></div>
<script type="text/javascript" src="/public/bundle.js"></script>
</body>
</html>
The important part here is that the variable #{languages} is used directly in server.js.
server.js
...
app.use('/public', express.static(__dirname + '/public'));
app.set('view engine', 'pug');
app.set('views', './views');
app.get('*', function(req, res, next) {
const cookieLanguage = req.cookies[key];
const languages = cookieLanguage
? cookieLanguage
: req.headers['accept-language'];
res.render('index', { languages });
});
...
This means that index.pug needs to have a .pug extension, not .html, and should be in the ./views directory to be used by server.js directly. (The value of languages can be modified based on the request header value as shown above.) As far as I know, the pug-html-loader and pug-loader convert .pug files into static .html files.
Up until now, I've been using static filenames for style.css and bundle.js without any issues, but now I want the filename of my index.pug to have a hash for versioning purposes. Something like this:
index.pug (desired)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/public/main.cdd8fd4b583e80bf95fc.css" rel="stylesheet" />
script.
var LANGUAGES = '#{languages}';
</head>
<body>
<div id="body"></div>
<script type="text/javascript" src="/public/main.cdd8fd4b583e80bf95fc.js"></script>
</body>
</html>
I am already able to generate these hashed filenames through my webpack.config.js.
webpack.config.js
...
(somewhere)
new ExtractTextPlugin({
filename: '[name].[hash].css'
})
...
(somewhere)
output: {
path: path.join(__dirname, 'public'),
filename: '[name].[hash].js',
publicPath: '/public/'
},
...
I have seen the html-webpack-plugin achieve this with .html files, but I am struggling to find an example of doing it with .pug files. Any suggestions or workarounds would be greatly appreciated.