dacodekid · August 29, 2022 02:27 · Sep 26, 2017 · Sep 26, 2017 · Sep 26, 2017
diff --git a/webpack.config.js b/webpack.config.js
@@ -46,7 +46,7 @@ module.exports = () => {
 		},
 
 		entry: {
-			blog: path.resolve(__dirname, 'themes', theme, 'assets', 'js', 'blog'),
+			main: path.resolve(__dirname, 'themes', theme, 'assets', 'js', 'main'),
 		},
 
 		output: {

diff --git a/index.html b/index.html
@@ -0,0 +1,3 @@
+<!-- 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>
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+"scripts": {
+    "build": "webpack -p",
+    "start": "APP_ENV=dev webpack"
+},
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,105 @@
+/*
+ * 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: {
+			blog: path.resolve(__dirname, 'themes', theme, 'assets', 'js', 'blog'),
+		},
+
+		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;
+}