Skip to content

Instantly share code, notes, and snippets.

@dacodekid
Last active August 29, 2022 02:27
Show Gist options
  • Save dacodekid/fe80d24d5723b7c0dab7207b18a17511 to your computer and use it in GitHub Desktop.
Save dacodekid/fe80d24d5723b7c0dab7207b18a17511 to your computer and use it in GitHub Desktop.
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'
}
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;
}
@dacodekid
Copy link
Author

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