Andrew Dorokhov
When Hugo pipes are not enough (npm libraries, complex bundling), pair Hugo with Webpack.
package.json
{
"name": "portfolio",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "hugo --cleanDestinationDir"
}
}
npm run build
Install
npm install --save-dev webpack webpack-cli
npm install --save axios lunr
webpack.config.js
const path = require('path');
module.exports = {
entry: './themes/basic/assets/js/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'themes', 'basic', 'assets', 'js')
}
};
Entry file imports libraries and your code:
'use strict'
import axios from 'axios';
import lunr from 'lunr';
// ...
Serve the bundle through Hugo pipes:
{{ $js := resources.Get "js/app.js" | minify | fingerprint }}
<script src="{{ $js.RelPermalink }}"></script>
Scripts
"scripts": {
"build": "hugo --cleanDestinationDir",
"hugo-server": "hugo server --disableFastRender",
"webpack": "webpack",
"webpack-watch": "webpack --watch"
}
Run Webpack and Hugo together with npm-run-all:
npm install --save-dev npm-run-all
"scripts": {
"hugo-build": "hugo --cleanDestinationDir",
"build": "npm-run-all webpack hugo-build",
"hugo-server": "hugo server --disableFastRender",
"webpack": "webpack",
"webpack-watch": "webpack --watch",
"dev": "npm-run-all webpack --parallel webpack-watch hugo-server"
}