Skip to content

Instantly share code, notes, and snippets.

@dacodekid dacodekid/index.html

Last active Dec 14, 2019
What would you like to do?
Hugo with Webpack Integration
<!-- 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>
"scripts": {
"build": "webpack -p",
"start": "APP_ENV=dev webpack"
* 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'
return {
watch: false,
filename: '[name].[hash]',
command: 'hugo'
module.exports = () => {
var env = set();
var config = {
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;

This comment has been minimized.

Copy link
Owner Author

dacodekid commented Sep 26, 2017

The above code generates

  • main.css & main.js during development (npm start)
  • main.HASH.css & main.HASH.js for production (npm run build)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.