Merge pull request #32 from arcticicestudio/feature/gh-31-webpack-con…

…figuration

Webpack configuration

.gatsby/onCreateBabelConfig.js

@@ -12,7 +12,6 @@
  * Allows to let plugins extend/mutate the project's Babel configuration.
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
- * @see https://gatsbyjs.org/docs/node-apis/#onCreateBabelConfig
  * @see https://babeljs.io
  * @since 0.1.0
  */
@@ -21,7 +20,8 @@
  * Implementation of the Gatsby Node `onCreateBabelConfig` API.
  *
  * @method onCreateBabelConfig
- * @param  {object} actions Collection functions provided by Gatsby used to manipulate the state of the build process.
+ * @param  {object} actions Collection of functions provided by Gatsby used to manipulate the state of the build
+ * process.
  * @see https://gatsbyjs.org/docs/node-apis/#onCreateBabelConfig
  * @see https://gatsbyjs.org/docs/actions
  * @since 0.1.0

.gatsby/onCreateWebpackConfig.js

@@ -0,0 +1,119 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Implementation of Gatsby Node `onCreateWebpackConfig` API.
+ * Allows to let plugins extend/mutate the project's webpack configuration.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @see https://webpack.js.org
+ * @since 0.1.0
+ */
+
+const { resolve: resolvePath } = require("path");
+/* eslint-disable import/no-extraneous-dependencies */
+const webpack = require("webpack");
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const GitRevisionPlugin = require("git-revision-webpack-plugin");
+/* eslint-enable import/no-extraneous-dependencies */
+
+const r = m => resolvePath(__dirname, m);
+
+/**
+ * Configuration for the `webpack-bundle-analyzer` plugin.
+ *
+ * @type {object}
+ * @see https://github.com/webpack-contrib/webpack-bundle-analyzer
+ * @since 0.1.0
+ */
+const bundleAnalyzerPluginConfig = {
+  analyzerMode: "static",
+  generateStatsFile: true,
+  openAnalyzer: false,
+  reportFilename: r("../build/reports/webpack-bundle-analyzer/index.html"),
+  statsFilename: r("../build/reports/webpack-bundle-analyzer/stats.json")
+};
+
+/**
+ * Configuration for the `git-revision-webpack-plugin` plugin.
+ *
+ * @type {object}
+ * @see https://github.com/pirelenito/git-revision-webpack-plugin
+ * @since 0.1.0
+ */
+const gitRevisionPluginConfig = {
+  branch: true
+};
+
+const gitRevisionPlugin = new GitRevisionPlugin(gitRevisionPluginConfig);
+
+/**
+ * Configuration for `webpack.DefinePlugin`.
+ *
+ * @type {object}
+ * @see https://webpack.js.org/plugins/define-plugin
+ * @since 0.1.0
+ */
+const definePluginConfig = {
+  "process.env.NORD_DOCS_GIT_VERSION": JSON.stringify(gitRevisionPlugin.version()),
+  "process.env.NORD_DOCS_GIT_COMMITHASH": JSON.stringify(gitRevisionPlugin.commithash()),
+  "process.env.NORD_DOCS_GIT_BRANCH": JSON.stringify(gitRevisionPlugin.branch())
+};
+
+/**
+ * Implementation of the Gatsby Node `onCreateWebpackConfig` API.
+ *
+ * @method onCreateWebpackConfig
+ * @param  {object} actions Collection of functions provided by Gatsby used to manipulate the state of the build
+ * @param  {string} stage The name of the current Gatsby build process stage.
+ * @see https://gatsbyjs.org/docs/node-apis/#onCreateWebpackConfig
+ * @see https://gatsbyjs.org/docs/actions/#setWebpackConfig
+ * @since 0.1.0
+ */
+const onCreateWebpackConfig = ({ actions, stage }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        assets: r("../src/assets/"),
+        atoms: r("../src/components/atoms/"),
+        config: r("../src/config/"),
+        containers: r("../src/components/containers/"),
+        data: r("../src/data/"),
+        layouts: r("../src/components/layouts/"),
+        molecules: r("../src/components/molecules/"),
+        organisms: r("../src/components/organisms/"),
+        pages: r("../src/components/pages/"),
+        stores: r("../src/stores/"),
+        styles: r("../src/styles/"),
+        templates: r("../src/components/templates/"),
+        utils: r("../src/utils/")
+      }
+    }
+  });
+
+  switch (stage) {
+    case "build-html":
+    case "build-javascript":
+      actions.setWebpackConfig({
+        plugins: [
+          new BundleAnalyzerPlugin(bundleAnalyzerPluginConfig),
+          new GitRevisionPlugin(),
+          new webpack.DefinePlugin(definePluginConfig)
+        ]
+      });
+      break;
+    case "develop":
+      actions.setWebpackConfig({
+        plugins: [new webpack.DefinePlugin(definePluginConfig)]
+      });
+      break;
+  }
+};
+
+module.exports = onCreateWebpackConfig;

gatsby-node.js

@@ -12,6 +12,8 @@
  * @author Arctic Ice Studio <[email protected]>
  * @author Sven Greb <[email protected]>
  * @see https://gatsbyjs.org/docs/node-apis
+ * @since 0.1.0
  */
 
 exports.onCreateBabelConfig = require("./.gatsby/onCreateBabelConfig");
+exports.onCreateWebpackConfig = require("./.gatsby/onCreateWebpackConfig");

package.json

@@ -55,12 +55,14 @@
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-prettier": "3.0.0",
     "eslint-plugin-react": "7.11.1",
+    "git-revision-webpack-plugin": "3.0.3",
     "husky": "1.1.4",
     "lint-staged": "8.0.5",
     "npm-run-all": "4.1.3",
     "prettier": "1.15.2",
     "remark-cli": "6.0.1",
-    "remark-preset-lint-arcticicestudio": ">=0.2.0 <1.0.0"
+    "remark-preset-lint-arcticicestudio": ">=0.2.0 <1.0.0",
+    "webpack-bundle-analyzer": "3.0.3"
   },
   "dependencies": {
     "gatsby": "2.0.50",

src/config/internal/constants.js

@@ -17,7 +17,7 @@
 /**
  *  The absolute path of the content base directory starting from the project root.
  *
- * @constant {String}
+ * @constant {string}
  * @since 0.1.0
  */
 const BASE_DIR_CONTENT = "content";
@@ -65,9 +65,9 @@ const BASE_DIR_PAGES = `${BASE_DIR_SRC}/pages`;
 /**
  * The internal type for MDX nodes.
  *
- * @constant {String}
- * @since 0.1.0
+ * @constant {string}
  * @see https://github.com/mdx-js/mdx
+ * @since 0.1.0
  */
 const NODE_TYPE_MDX = "Mdx";