Simplify webpack and codebase

docs/contributing.rst

@@ -58,6 +58,23 @@ Or to completely remove the environment generated by ``nox`` and start from scra
 
     $ rm -rf .nox/docs
 
+.. admonition:: Use nox with your global environment
+    :class: tip
+
+    If you'd like to use ``nox`` with your **global** environment (the one from
+    which you are calling ``nox``), you can do so with
+
+    .. code-block:: console
+        
+        $ nox --force-backend none
+
+        # alternatively:
+        $ nox -fb none
+        
+    Using `none` will re-use your current global environment. See
+    `the nox documentation <https://nox.thea.codes/en/stable/usage.html#forcing-the-sessions-backend>`_
+    for more details.
+
 If you've :ref:`manually set up your environment <manual-environment>`, you can build them with:
 
 .. code-block:: console
@@ -118,11 +135,6 @@ then run the following command:
 
     $ nox -s docs-live
 
-If you've :ref:`manually set up your environment <manual-environment>`, you can build them with:
-
-.. code-block:: console
-
-    $ yarn build:dev
 
 Run the tests
 =============
@@ -242,7 +254,7 @@ The CSS and JS for this theme are built for the browser from ``src/*`` with
 
   - provides add-on Bootstrap features, as well as some custom navigation behavior
 
-- webpack: ``webpack.common.js``
+- webpack: ``webpack.js``
 
   - captures the techniques for transforming the JS and CSS source files in
     ``src/`` into the production assets in ``pydata_sphinx_theme/static/``
@@ -252,7 +264,7 @@ These entrypoints, and all files they reference, are bundled into
 
 The ``<hash>`` ensures the correct asset versions are served when viewers return to your
 site after upgrading the theme, and is reproducibly derived from ``src/**/*``,
-``webpack.{common,prod}.js``, and the ``dependencies`` and ``devDependencies``
+``webpack.js``, and the ``dependencies`` and ``devDependencies``
 in ``package.json``/``yarn.lock``.
 
 Web fonts, and their supporting CSS, are copied into
@@ -296,7 +308,7 @@ The remaining vendored font selection is:
 
   - reducing flicker and re-layout artifacts of early icon renders
 
-- mostly managed in ``webpack.common.js``
+- mostly managed in ``webpack.js``
 
   - allowing upgrades to be handled in a relatively sane, manageable way, to
     ensure the most recent icons
@@ -321,11 +333,11 @@ Change a font
 -------------
 
 If the above doesn't work, for example if file names for an existing font change,
-or a new font variant altogether is being added, hand-editing of ``webpack.common.js``
+or a new font variant altogether is being added, hand-editing of ``webpack.js``
 is required. The steps are roughly:
 
 - install the new font, as above, with ``yarn add``
-- in ``webpack.common.js``:
+- in ``webpack.js``:
 
   - add the new font to ``vendorVersions`` and ``vendorPaths``
   - add new ``link`` tags to the appropriate macro in ``macroTemplate``

docs/requirements.txt

@@ -6,6 +6,7 @@ pytest
 pytest-regressions
 beautifulsoup4
 sphinx-sitemap
+sphinx-autobuild
 # For demo examples
 jupyter_sphinx
 plotly

noxfile.py

@@ -27,7 +27,21 @@ def docs(session):
 @nox.session(name="docs-live", venv_backend="conda")
 def docs_live(session):
     _install_environment(session)
-    session.run("yarn", "build:dev")
+    # fmt: off
+    session.run(
+        "sphinx-autobuild",
+        "--watch", "pydata_sphinx_theme",
+        "--watch", "src",
+        "--pre-build", "yarn build",
+        "--re-ignore", "pydata_sphinx_theme/static/.*",
+        "--re-ignore", "pydata_sphinx_theme/static/theme.conf",
+        "--re-ignore", "_build/.*",
+        "--delay", "2",
+        "--port", "0",
+        "--open-browser",
+        "-n", "-b", "html", "docs/", "docs/_build/html"
+    )
+    # fmt: on
 
 
 @nox.session(name="test", venv_backend="conda")

package.json

@@ -4,10 +4,8 @@
   "main": "js/index.js",
   "repository": "https://github.com/pydata/pydata-sphinx-theme",
   "scripts": {
-    "start": "yarn build:dev",
     "build": "yarn build:production",
-    "build:dev": "webpack-dev-server --config webpack.dev.js",
-    "build:production": "webpack --config webpack.prod.js"
+    "build:production": "webpack --config webpack.js"
   },
   "devDependencies": {
     "clean-webpack-plugin": "^3.0.0",

pydata_sphinx_theme/static/webpack-macros.html

@@ -17,9 +17,9 @@
 {% endmacro %}
 
 {% macro head_js_preload() %}
-  <link rel="preload" as="script" href="{{ pathto('_static/js/index.9ea38e314b9e6d9dab77.js', 1) }}">
+  <link rel="preload" as="script" href="{{ pathto('_static/js/index.4e2f21d8869e3fc3ee0b.js', 1) }}">
 {% endmacro %}
 
 {% macro body_post() %}
-  <script src="{{ pathto('_static/js/index.9ea38e314b9e6d9dab77.js', 1) }}"></script>
+  <script src="{{ pathto('_static/js/index.4e2f21d8869e3fc3ee0b.js', 1) }}"></script>
 {% endmacro %}

src/js/index.js

@@ -1,6 +1,6 @@
 /**
  * This file should be edited in ./src/js/index.js. After bundling the resulting file in ./pydata_sphinx_theme/static/js/index.js should never be manually changed.
- * Edit ./src/js/index.js and run yarn build:dev or yarn build:production.
+ * Edit ./src/js/index.js and run yarn build:production.
  */
 
 /* Sphinx injects the html output with jquery and other javascript files.

webpack.common.js → webpack.js

@@ -3,6 +3,8 @@ const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
 const staticPath = resolve(__dirname, 'pydata_sphinx_theme', 'static');
 
@@ -70,13 +72,17 @@ function macroTemplate({ compilation }) {
 }
 
 module.exports = {
+  mode: "production",
   entry: {
     index: ['./src/js/index.js'],
   },
   output: {
     filename: 'js/[name].[hash].js',
     path: staticPath,
   },
+  optimization: {
+    minimizer: [new TerserPlugin(), new OptimizeCssAssetsPlugin({})]
+  },
   externals: {
     // Define jQuery as external, this way Sphinx related javascript
     // and custom javascript like popper.js can hook into jQuery.