diff --git a/app/helpers/reactjs_helper.rb b/app/helpers/reactjs_helper.rb index 5348c152833..a09381c2372 100644 --- a/app/helpers/reactjs_helper.rb +++ b/app/helpers/reactjs_helper.rb @@ -33,7 +33,7 @@ def read_webpack_manifest def get_webpack_chunk(name, extension) data = read_webpack_manifest - data['assetsByChunkName'][name].find { |value| value.end_with?(".#{extension}") } + data['assetsByChunkName'][name]&.find { |value| value.end_with?(".#{extension}") } end def get_webpack_foreman_vendor_js diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index 63d70227bb5..7099e4d458f 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -31,15 +31,15 @@ <%= javascript_include_tag "locale/#{FastGettext.locale}/app" %> <%= locale_js_tags %> - + <%= yield(:head) %> <%= get_webpack_foreman_vendor_js %> - <%= javascript_include_tag('/webpack/vendor.js') %> - <%= javascript_include_tag('/webpack/bundle.js') %> - <%= javascript_include_tag('/webpack/reactExports.js') %> + <%= javascript_include_tag("/webpack/#{get_webpack_chunk('vendor', 'js')}") %> + <%= javascript_include_tag("/webpack/#{get_webpack_chunk('bundle', 'js')}") %> + <%= javascript_include_tag("/webpack/#{get_webpack_chunk('reactExports', 'js')}") %> <%= javascript_include_tag 'application' %> <%= webpacked_plugins_with_global_js %> diff --git a/config/webpack.config.js b/config/webpack.config.js index f5a6ab5a7b2..17c8186432e 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -153,6 +153,12 @@ const coreConfig = function() { 'webpack/assets/javascripts/bundle.js' ); config.context = path.resolve(__dirname, '..'); + if (config.mode == 'production') { + var chunkFilename = '[name]-[chunkhash].js' + } else { + var chunkFilename = '[name].js' + } + config.entry = { bundle: { import: bundleEntry, dependOn: ['vendor', 'reactExports'] }, vendor: vendorEntry, @@ -169,6 +175,7 @@ const coreConfig = function() { name: ['TheForeman', '[name]'], type: 'var', }, + filename: chunkFilename, }; var plugins = config.plugins; @@ -236,6 +243,7 @@ const pluginConfig = function(plugin) { if (config.mode == 'production') { var outputPath = path.join(pluginRoot, 'public', 'webpack', pluginName); + var chunkFilename = '[name]-[chunkhash].js' } else { var outputPath = path.join( __dirname, @@ -244,10 +252,12 @@ const pluginConfig = function(plugin) { 'webpack', pluginName ); + var chunkFilename = '[name].js' } config.output = { path: outputPath, publicPath: '/webpack/' + pluginName + '/', + filename: chunkFilename, uniqueName: pluginName, }; var configModules = config.resolve.modules || [];