Hugo with Webpack Integration

index.html

<!-- refer generated css/js file  -->
<link rel="stylesheet" href="{{$.Site.BaseURL}}/{{ if eq (getenv "APP_ENV") "dev" }}main.css{{ else }}{{ index .Site.Data.manifest "main.css" | relURL }}{{ end }}">
<script type="text/javascript" src="{{$.Site.BaseURL}}/{{ if eq (getenv "APP_ENV") "dev" }}main.js{{ else }}{{ index .Site.Data.manifest "main.js" | relURL }}{{ end }}"></script>

package.json

"scripts": {
    "build": "webpack -p",
    "start": "APP_ENV=dev webpack"
},
 

webpack.config.js

/*
 * A 'pure' webpack solution for hugo
 * Creates cachebustable assets for production
 */

'use strict';

const path = require('path');
const CleanPlugin = require('clean-webpack-plugin');
const shellPlugin = require('webpack-shell-plugin');
const manifestPlugin = require('webpack-manifest-plugin');
const extractPlugin = require('extract-text-webpack-plugin');
const WebpackBrowserPlugin = require('webpack-browser-plugin');

// change hugo's theme name as needed
const theme = 'default';

// return env specific values, defaults to 'production'
function set() {
	switch (process.env.APP_ENV) {
		case 'dev':
			return {
				watch: true,
				filename: '[name]',
				command: 'hugo serve --buildDrafts=true'
			}
		default:
			return {
				watch: false,
				filename: '[name].[hash]',
				command: 'hugo'
			}
	}
}

module.exports = () => {
	var env = set();

	var config = {
		watch: env.watch,

		context: __dirname,

		resolve: {
			extensions: ['.js', '.scss', '.css']
		},

		entry: {
			main: path.resolve(__dirname, 'themes', theme, 'assets', 'js', 'main'),
		},

		output: {
			path: path.resolve(__dirname, 'themes', theme, 'static'),
			filename: env.filename + '.js',
			chunkFilename: '[id].chunk.js',
		},

		plugins: [
			new CleanPlugin([
				path.resolve(__dirname, 'themes', theme, 'static'),
				path.resolve(__dirname, 'public')
			]),

			new extractPlugin({
				filename: env.filename + '.css',
			}),

			// Run hugo command after build
			new shellPlugin({
				onBuildEnd: [env.command]
			}),

			/*
			Creates manifest file for cachebustable assets
			Leave this plugin to the last, so it can be 'popped' for dev env, otherwise
			hugo will unnecessarily rebuild the site for each webpack build
			*/
			new manifestPlugin({
				fileName: '../data/manifest.json',
			}),
		],

		module: {
			rules: [{
				test: /\.(css|scss)$/,
				use: extractPlugin.extract({
					fallback: 'style-loader',
					use: 'css-loader!postcss-loader!sass-loader'
				})
			}]
		}
	};

	switch (process.env.APP_ENV) {
		case 'dev':
			config.plugins.pop(); // remove manifest plugin
			config.plugins.push(new WebpackBrowserPlugin({
				browser: 'Chrome',
				port: 1313,
				url: 'http://localhost'
			}));
	}

	return config;
}

The above code generates

• main.css & main.js during development (npm start)
• main.HASH.css & main.HASH.js for production (npm run build)