copy changes to template versions of webpack config files, re #11670

archesproject · Jan 19, 2025 · c98635e · c98635e
1 parent 901bb09
commit c98635e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 2 deletions.
diff --git a/arches/install/arches-templates/webpack/webpack-utils/build-filepath-lookup.js b/arches/install/arches-templates/webpack/webpack-utils/build-filepath-lookup.js
@@ -33,9 +33,13 @@ function buildFilepathLookup(path, staticUrlPrefix) {
         }
         const extension = file.match(/[^.]+$/).toString();
         const extensionReplacementRegex = new RegExp(`\\.${extension}$`);
+        const relativePath = file.replace(path,'').replace(/\\/g, '/').replace(/^\//,'');
 
         if (extension === 'js') {
-            lookup[file.replace(path,'').replace(/\\/g, '/').replace(extensionReplacementRegex,'').replace(/^\//,'')] = {"import": file, "filename": `${prefix}/[name].${extension}`};
+            lookup[relativePath.replace(extensionReplacementRegex,'')] = {
+                "import": file, 
+                "filename": `${prefix}/[name].[contenthash:8].${extension}`
+            };
         }
         else if (extension === 'css' || extension === 'scss') {
             lookup[Path.join('css', file.replace(path,'')).replace(/\\/g, '/').replace(extensionReplacementRegex,'').replace(/^\//,'')] = { 'import': file };

diff --git a/arches/install/arches-templates/webpack/webpack.common.js b/arches/install/arches-templates/webpack/webpack.common.js
@@ -6,6 +6,7 @@ const Path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const BundleTracker = require('webpack-bundle-tracker');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { VueLoaderPlugin } = require("vue-loader");
@@ -41,6 +42,18 @@ module.exports = () => {
             PROJECT_RELATIVE_NODE_MODULES_PATH = Path.resolve(APP_ROOT, '..', 'node_modules');
         }
 
+        const manifestPlugin = new WebpackManifestPlugin({
+            fileName: 'manifest.json',
+            publicPath: global.STATIC_URL,
+            generate: (seed, files) => {
+                const manifest = {};
+                files.forEach(file => {
+                    manifest[file.name] = file.path;
+                });
+                return manifest;
+            },
+        });
+
         // END workaround for handling node_modules paths in arches-core vs projects
         // BEGIN create entry point configurations
 
@@ -277,7 +290,7 @@ module.exports = () => {
                 assetModuleFilename: 'img/[hash][ext][query]',
             },
             plugins: [
-                new CleanWebpackPlugin(),
+                new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: ['**/*', '!manifest.json'],}),
                 new webpack.DefinePlugin(universalConstants),
                 new webpack.DefinePlugin({
                     __VUE_OPTIONS_API__: 'true',
@@ -295,6 +308,7 @@ module.exports = () => {
                     filename: 'webpack-stats.json' 
                 }),
                 new VueLoaderPlugin(),
+                manifestPlugin,
             ],
             resolveLoader: {
                 alias: {

diff --git a/arches/install/arches-templates/webpack/webpack.config.dev.js b/arches/install/arches-templates/webpack/webpack.config.dev.js
@@ -5,6 +5,7 @@ const Webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const StylelintPlugin = require('stylelint-webpack-plugin');
 
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const commonWebpackConfigPromise = require('./webpack.common.js');
 
 module.exports = () => {
@@ -15,6 +16,7 @@ module.exports = () => {
                 // devtool: 'inline-source-map',
                 output: {
                     chunkFilename: Path.join('js', '[name].chunk.js'),
+                    filename: Path.join('js', '[name].[chunkhash:8].js'),
                 },
                 devServer: {
                     historyApiFallback: true,
@@ -43,6 +45,17 @@ module.exports = () => {
                     }),
                     new StylelintPlugin({
                         files: Path.join('src', '**/*.s?(a|c)ss'),
+                    }),
+                    new WebpackManifestPlugin({
+                        fileName: 'manifest.json',
+                        publicPath: commonWebpackConfig.STATIC_URL,
+                        generate: (seed, files) => {
+                            const manifest = {};
+                            files.forEach(file => {
+                                manifest[file.name] = file.path;
+                            });
+                            return manifest;
+                        },
                     })
                 ],
             }));

diff --git a/arches/install/arches-templates/webpack/webpack.config.prod.js b/arches/install/arches-templates/webpack/webpack.config.prod.js
@@ -4,6 +4,7 @@ const Path = require('path');
 const TerserPlugin = require("terser-webpack-plugin");
 const Webpack = require('webpack');
 const { merge } = require('webpack-merge');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 
 const commonWebpackConfigPromise = require('./webpack.common.js');
 
@@ -33,6 +34,17 @@ module.exports = () => {
                     new Webpack.DefinePlugin({
                         'process.env.NODE_ENV': JSON.stringify('production'),
                     }),
+                    new WebpackManifestPlugin({
+                        fileName: 'manifest.json',
+                        publicPath: commonWebpackConfig.STATIC_URL,
+                        generate: (seed, files) => {
+                            const manifest = {};
+                            files.forEach(file => {
+                                manifest[file.name] = file.path;
+                            });
+                            return manifest;
+                        },
+                    }),
                 ],
             }));
         });