feat(build): add webpack output hashing option

docs/docs/executors/build.md

@@ -124,6 +124,19 @@ Type: `boolean`
 
 Produce source maps (default: true)
 
+### --outputHashing
+
+Type: `string`
+
+Configure webpack output hashing (default: none)
+
+| option  | chunk | extract | file | script |
+| :------ | :---: | :-----: | :--: | :----: |
+| none    |  ❌   |   ❌    |  ❌  |   ❌   |
+| media   |  ❌   |   ❌    |  ✅  |   ❌   |
+| bundles |  ✅   |   ✅    |  ❌  |   ✅   |
+| all     |  ✅   |   ✅    |  ✅  |   ✅   |
+
 ### --progress
 
 Type: `boolean`

packages/nx-shopify/src/executors/build/schema.d.ts

@@ -22,6 +22,7 @@ export interface BuildExecutorSchema {
 
   watch?: boolean;
   sourceMap?: boolean | SourceMapOptions;
+  outputHashing?: string;
   optimization?: boolean | OptimizationOptions;
   showCircularDependencies?: boolean;
   memoryLimit?: number;

packages/nx-shopify/src/executors/build/schema.json

@@ -39,6 +39,12 @@
       "description": "Produce source maps",
       "default": true
     },
+    "outputHashing": {
+      "type": "string",
+      "description": "Define the output filename cache-busting hashing mode.",
+      "default": "none",
+      "enum": ["none", "all", "media", "bundles"]
+    },
     "progress": {
       "type": "boolean",
       "description": "Log progress to the console while building",

packages/nx-shopify/src/generators/theme/theme.generator.ts

@@ -92,6 +92,7 @@ function addBuildTarget(
   const productionBuildOptions: Partial<BuildExecutorSchema> = {
     optimization: true,
     sourceMap: false,
+    outputHashing: 'all',
     fileReplacements: [
       {
         replace: joinPathFragments(

packages/nx-shopify/src/webpack/configs/partials/core.config.ts

@@ -18,6 +18,7 @@ import {
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { BuildExecutorSchema } from '../../../executors/build/schema';
 import { getAliases, getStatsConfig } from '../../../utils/webpack-utils';
+import { getOutputHashFormat } from '../../utils';
 
 import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
@@ -126,6 +127,8 @@ export function getCoreWebpackPartialConfig(
   const mainFields = [...(supportsEs2015 ? ['es2015'] : []), 'module', 'main'];
   const extensions = ['.ts', '.tsx', '.js', '.jsx'];
 
+  const hashFormat = getOutputHashFormat(options.outputHashing);
+
   const webpackConfig: Configuration = {
     devtool:
       sourceMap && typeof sourceMap === 'boolean'
@@ -140,7 +143,7 @@ export function getCoreWebpackPartialConfig(
           test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
           loader: require.resolve('file-loader'),
           options: {
-            name: `assets/[name].[hash:20].[ext]`,
+            name: `assets/[name]${hashFormat.file}.[ext]`,
           },
         },
         {

packages/nx-shopify/src/webpack/configs/shopify.config.ts

@@ -4,18 +4,32 @@ import * as path from 'path';
 import { Configuration } from 'webpack';
 import * as webpackMerge from 'webpack-merge';
 import { BuildExecutorSchema } from '../../executors/build/schema';
+import { getOutputHashFormat } from '../utils';
 import { getCoreWebpackPartialConfig } from './partials/core.config';
 import { getStylesWebpackPartialConfig } from './partials/styles.config';
 
 export function getShopifyWebpackConfig(
   options: BuildExecutorSchema,
   isDevServer: boolean
 ) {
-  const { sourceRoot, outputPath, themekitConfig, main } = options;
+  const {
+    sourceRoot,
+    outputPath,
+    themekitConfig,
+    main,
+    optimization,
+  } = options;
+
+  const hashFormat = getOutputHashFormat(options.outputHashing);
+
+  const filename = optimization
+    ? `assets/[name]${hashFormat.script}.js`
+    : 'assets/[name].js';
+
+  const chunkFilename = optimization
+    ? `assets/[name]${hashFormat.chunk}.js`
+    : 'assets/[name].js';
 
-  const chunksBaseName = isDevServer
-    ? 'assets/[name]'
-    : 'assets/[name].[contenthash]';
   const chunksOutputPath = `${outputPath}`;
 
   let webpackConfig: Configuration = {
@@ -24,8 +38,8 @@ export function getShopifyWebpackConfig(
       : main,
     output: {
       path: chunksOutputPath,
-      filename: `${chunksBaseName}.js`,
-      publicPath: '/assets',
+      filename,
+      chunkFilename,
     },
     plugins: [
       new CopyWebpackPlugin({
@@ -124,7 +138,7 @@ export function getShopifyWebpackConfig(
 
   webpackConfig = webpackMerge.merge(
     getCoreWebpackPartialConfig(options, isDevServer),
-    getStylesWebpackPartialConfig(options, chunksBaseName, isDevServer),
+    getStylesWebpackPartialConfig(options, chunkFilename, isDevServer),
     webpackConfig
   );
 

packages/nx-shopify/src/webpack/utils/index.ts

@@ -1 +1,2 @@
 export * from './hmr/hot-update-utils';
+export * from './output-utils';

packages/nx-shopify/src/webpack/utils/output-utils.ts

@@ -0,0 +1,26 @@
+export interface HashFormat {
+  chunk: string;
+  extract: string;
+  file: string;
+  script: string;
+}
+
+export function getOutputHashFormat(option: string, length = 20): HashFormat {
+  const hashFormats: { [option: string]: HashFormat } = {
+    none: { chunk: '', extract: '', file: '', script: '' },
+    media: { chunk: '', extract: '', file: `.[hash:${length}]`, script: '' },
+    bundles: {
+      chunk: `.[chunkhash:${length}]`,
+      extract: `.[contenthash:${length}]`,
+      file: '',
+      script: `.[hash:${length}]`,
+    },
+    all: {
+      chunk: `.[chunkhash:${length}]`,
+      extract: `.[contenthash:${length}]`,
+      file: `.[hash:${length}]`,
+      script: `.[hash:${length}]`,
+    },
+  };
+  return hashFormats[option] || hashFormats['none'];
+}