refactor(common): CHECKOUT-4338 Include hash in file name so we can d…

…etermine public path for IE11 more reliably
bigcommerce · Aug 20, 2019 · e5a9c57 · e5a9c57
1 parent d352673
commit e5a9c57
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/scripts/webpack/public-path.js b/scripts/webpack/public-path.js
@@ -1,17 +1,20 @@
 const { default: InjectPlugin } = require('webpack-inject-plugin');
 
 class PublicPathPlugin {
+    constructor(hash) {
+        this.hash = hash;
+    }
+
     apply(compiler) {
-        const entryName = Object.keys(compiler.options.entry)[0];
-        const injectPlugin = new InjectPlugin(() => this.generateCode(entryName));
+        const injectPlugin = new InjectPlugin(() => this.generateCode());
 
         injectPlugin.apply(compiler);
     }
 
-    generateCode(entryName) {
+    generateCode() {
         return `
 (function setPublicPath() {
-    var script = document.currentScript || document.querySelector('script[src*="${entryName}"]');
+    var script = document.currentScript || document.querySelector('script[src*="${this.hash}"]');
     var path = script.src.split('/').slice(0, -1).join('/') + '/';
 
     __webpack_require__.p = path;

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const { exec } = require('child_process');
 const { omitBy } = require('lodash');
 const { join } = require('path');
+const { createHash } = require('crypto');
 
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -9,6 +10,7 @@ const WebpackAssetsManifest = require('webpack-assets-manifest');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 const PublicPathPlugin = require('./scripts/webpack/public-path');
+const packageInfo = require('./package.json');
 
 const babelOptions = {
     cacheDirectory: true,
@@ -33,6 +35,7 @@ const babelOptions = {
 module.exports = function (options, argv) {
     const mode = argv.mode || 'production';
     const isProduction = mode !== 'development';
+    const outputFilename = `[name]-${getPublicPathHash()}${isProduction ? '-[contenthash:8]' : ''}`;
 
     return {
         entry: {
@@ -59,8 +62,8 @@ module.exports = function (options, argv) {
         },
         output: {
             path: isProduction ? join(__dirname, 'dist') : join(__dirname, 'build'),
-            filename: `[name]${isProduction ? '-[contenthash:8]' : ''}.js`,
-            chunkFilename: `[name]${isProduction ? '-[contenthash:8]' : ''}.js`,
+            filename: `${outputFilename}.js`,
+            chunkFilename: `${outputFilename}.js`,
             jsonpFunction: 'webpackJsonpCheckout',
             library: 'checkout',
             libraryTarget: 'umd',
@@ -73,14 +76,14 @@ module.exports = function (options, argv) {
                 emitErrors: isProduction,
             }),
             isProduction && new MiniCssExtractPlugin({
-                filename: `[name]${isProduction ? '-[contenthash:8]' : ''}.css`,
-                chunkFilename: `[name]${isProduction ? '-[contenthash:8]' : ''}.css`,
+                filename: `${outputFilename}.css`,
+                chunkFilename: `${outputFilename}.css`,
             }),
             new CircularDependencyPlugin({
                 exclude: /.*\.spec\.tsx?/,
                 include: /src\/app/,
             }),
-            new PublicPathPlugin(),
+            new PublicPathPlugin(getPublicPathHash()),
             new WebpackAssetsManifest({
                 entrypoints: true,
                 transform: assets => transformManifest(assets, options),
@@ -125,7 +128,7 @@ module.exports = function (options, argv) {
                         {
                             loader: 'file-loader',
                             options: {
-                                name: `[name]${isProduction ? '-[contenthash:8]' : ''}.[ext]`,
+                                name: `${outputFilename}.[ext]`,
                                 outputPath: 'static',
                             },
                         },
@@ -169,6 +172,13 @@ function transformManifest(assets, options) {
     };
 }
 
+function getPublicPathHash() {
+    return createHash('md4')
+        .update(packageInfo.name)
+        .digest('hex')
+        .substr(0, 8);
+}
+
 class BuildHooks {
     apply(compiler) {
         if (process.env.WEBPACK_DONE) {