My directory structure is as follows.
/public
(git-ignored files)
/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 key here is that #{languages} is directly used by 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 });
});
...
Which means that index.pug should be .pug, not .html, and in ./views directory to be directly used by server.js. (languages value can be changed based on request header value, as you see above.) AFAIK, pug-html-loader and pug-loader convert .pug files into static .html file(s).
So far I've been using static style.css and bundle.js filenames and it's working without any problem but now I want my index.pug file to have hashed source filename. Something like
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 can already create those hashed filename through 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 saw html-webpack-plugin exactly doing this with .html extension, but I can't find the example of doing it with .pug output. Any suggestion or walkaround?