Build Websites with Hugo

Using Webpack and npm with Hugo

Hugo tries hard to draw boundaries between what it does and what other programs should do. While Hugo can minify, concatenate, and fingerprint JavaScript files, it doesn’t have support for more advanced JavaScript development, like import statements and transpilation.

Webpack is one of the most popular tools for managing and building front-end applications. It’s powered by Node.js, and as a result, you’ll be able to use npm, the package manager for Node.js, to manage all of the dependencies for your project, including Lunr, Axios, and Webpack. You’ll also be able to use npm to create a more automated way of building your site.

To get started, create a package.json file. This file lets you track JavaScript dependencies ...