From fb3a70b4729d9757861fa185ebc52b43be9f4b88 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 13:42:50 -0700 Subject: [PATCH 01/13] Rename webpack/application.js -> webpack/main.js This avoids having two `application.js` files (one in `webpack/` and one in `app/assets`, which is confusing/error-prone) in favor of using unique/unambiguous filenames. --- app/views/welcome/index.html.erb | 2 +- config/webpack.config.js | 2 +- webpack/{application.js => main.js} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename webpack/{application.js => main.js} (100%) diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 3a0e306..be63089 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -5,7 +5,7 @@ RailsSprocketsWebpackDemo <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> - <%= javascript_include_tag *webpack_asset_paths('application') %> + <%= javascript_include_tag *webpack_asset_paths('main') %> <%= csrf_meta_tags %> diff --git a/config/webpack.config.js b/config/webpack.config.js index 6436558..52916eb 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -14,7 +14,7 @@ var production = process.env.TARGET === 'production'; var config = { entry: { // Sources are expected to live in $app_root/webpack - 'application': './webpack/application.js' + 'main': './webpack/main.js' }, output: { diff --git a/webpack/application.js b/webpack/main.js similarity index 100% rename from webpack/application.js rename to webpack/main.js From 509846b7c855a71e62ed96eaee07ed83e531aa88 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 13:44:30 -0700 Subject: [PATCH 02/13] Add webpack-assets-manifest dependency This will be used to produce an asset manifest mapping entry point names to hashed filenames, for use with the external_asset_pipeline gem. (The current asset manifest produced by the StatsPlugin is in a different format that includes a bunch of extra information which isn't needed by and isn't compatible with external_asset_pipeline.) --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 44b3845..ffceae2 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "stats-webpack-plugin": "^0.2.1", "webpack": "^1.9.11", + "webpack-assets-manifest": "^1.0.0", "webpack-dev-server": "^1.9.0" } } From 6efb9153fcd91cd84a079fd22d03519542aee2ad Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 13:46:45 -0700 Subject: [PATCH 03/13] Enable WebpackAssetsManifest plugin --- config/webpack.config.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index 52916eb..4cdfd5f 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -4,6 +4,7 @@ var path = require('path'); var webpack = require('webpack'); var StatsPlugin = require('stats-webpack-plugin'); +var WebpackAssetsManifest = require('webpack-assets-manifest'); // must match config.webpack.dev_server.port var devServerPort = 3808; @@ -41,7 +42,9 @@ var config = { chunks: false, modules: false, assets: true - })] + }), + new WebpackAssetsManifest({ output: 'asset-manifest.json' }) + ] }; if (production) { From 758e6557c9b1c2bcad6dd81f2687ba32d8108fc0 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 13:47:24 -0700 Subject: [PATCH 04/13] Add external_asset_pipeline dependency This will be used to replace webpack-rails, which is no longer maintained. --- Gemfile | 1 + Gemfile.lock | 3 +++ 2 files changed, 4 insertions(+) diff --git a/Gemfile b/Gemfile index 7c61d1a..d8e92d5 100644 --- a/Gemfile +++ b/Gemfile @@ -3,5 +3,6 @@ source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.0' +gem 'external_asset_pipeline' gem 'webpack-rails' gem 'foreman' diff --git a/Gemfile.lock b/Gemfile.lock index c543983..26394cf 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -43,6 +43,8 @@ GEM concurrent-ruby (1.1.5) crass (1.0.4) erubis (2.7.0) + external_asset_pipeline (0.6.0) + railties (>= 5.0.0, < 7.0) foreman (0.78.0) thor (~> 0.19.1) globalid (0.4.2) @@ -109,6 +111,7 @@ PLATFORMS ruby DEPENDENCIES + external_asset_pipeline foreman rails (~> 5.0.0) webpack-rails From 3e941487176ec5713c52b66a134639dad966c429 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 13:53:23 -0700 Subject: [PATCH 05/13] Configure external_asset_pipeline gem --- config/application.rb | 8 ++++++++ config/environments/development.rb | 6 ++++++ 2 files changed, 14 insertions(+) diff --git a/config/application.rb b/config/application.rb index d6bb85b..c90ee76 100644 --- a/config/application.rb +++ b/config/application.rb @@ -6,6 +6,8 @@ require "action_view/railtie" require "sprockets/railtie" +require 'external_asset_pipeline/railtie' + # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(*Rails.groups) @@ -15,5 +17,11 @@ class Application < Rails::Application # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. + + config.external_asset_pipeline.configure do |c| + c.fall_back_to_sprockets = true + c.assets_prefix = '/webpack' + c.manifest_filename = 'asset-manifest.json' + end end end diff --git a/config/environments/development.rb b/config/environments/development.rb index a6ad1a1..350a587 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -43,4 +43,10 @@ # Use an evented file watcher to asynchronously detect changes in source code, # routes, locales, etc. This feature depends on the listen gem. # config.file_watcher = ActiveSupport::EventedFileUpdateChecker + + config.external_asset_pipeline.configure do |c| + c.cache_manifest = false + c.dev_server.enabled = true + c.dev_server.port = 3808 + end end From cfb0e622ae205b48b8ad0c64420856ed77a87e91 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:06:32 -0700 Subject: [PATCH 06/13] Refactor app/views/welcome/index.html.erb to use external_asset_pipeline instead of webpack-rails (as the latter is no longer maintained, so we're replacing it with the former). --- app/views/welcome/index.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index be63089..0da72d9 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -5,7 +5,7 @@ RailsSprocketsWebpackDemo <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> - <%= javascript_include_tag *webpack_asset_paths('main') %> + <%= javascript_include_tag 'main' %> <%= csrf_meta_tags %> From f641ee37b9905878d1d021b695ccc06e65b2a268 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:11:50 -0700 Subject: [PATCH 07/13] Update comments in webpack.config.js These were outdated after we switched from webpack-rails to the external_asset_pipeline gem. --- config/webpack.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index 4cdfd5f..9582ae9 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -6,7 +6,7 @@ var webpack = require('webpack'); var StatsPlugin = require('stats-webpack-plugin'); var WebpackAssetsManifest = require('webpack-assets-manifest'); -// must match config.webpack.dev_server.port +// this must match config.external_asset_pipeline.dev_server.port var devServerPort = 3808; // set TARGET=production on the environment to add asset fingerprints @@ -22,7 +22,7 @@ var config = { // Build assets directly in to public/webpack/, let webpack know // that all webpacked assets start with webpack/ - // must match config.webpack.output_dir + // these must match config.external_asset_pipeline.assets_prefix path: path.join(__dirname, '..', 'public', 'webpack'), publicPath: '/webpack/', @@ -34,7 +34,6 @@ var config = { }, plugins: [ - // must match config.webpack.manifest_filename new StatsPlugin('manifest.json', { // We only need assetsByChunkName chunkModules: false, @@ -43,6 +42,7 @@ var config = { modules: false, assets: true }), + // this must match config.external_asset_pipeline.manifest_filename new WebpackAssetsManifest({ output: 'asset-manifest.json' }) ] }; From cb0c432b4525c0ebea6a2a95800d295aea6da8e0 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:13:10 -0700 Subject: [PATCH 08/13] Remove StatsPlugin from webpack configuration This was only needed for webpack-rails, which we've stopped using in favor of the external_asset_pipeline gem (which uses the manifest produced by the webpack-assets-manifest plugin). --- config/webpack.config.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index 9582ae9..59a4a41 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -3,7 +3,6 @@ var path = require('path'); var webpack = require('webpack'); -var StatsPlugin = require('stats-webpack-plugin'); var WebpackAssetsManifest = require('webpack-assets-manifest'); // this must match config.external_asset_pipeline.dev_server.port @@ -34,14 +33,6 @@ var config = { }, plugins: [ - new StatsPlugin('manifest.json', { - // We only need assetsByChunkName - chunkModules: false, - source: false, - chunks: false, - modules: false, - assets: true - }), // this must match config.external_asset_pipeline.manifest_filename new WebpackAssetsManifest({ output: 'asset-manifest.json' }) ] From 0d6e68eaa15a858898053f316b5a35ca72825ff1 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:14:57 -0700 Subject: [PATCH 09/13] Remove no-longer-used stats-webpack-plugin dependency --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index ffceae2..c5faf60 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "version": "0.0.1", "license": "MIT", "dependencies": { - "stats-webpack-plugin": "^0.2.1", "webpack": "^1.9.11", "webpack-assets-manifest": "^1.0.0", "webpack-dev-server": "^1.9.0" From a5f21cbdf31856b94723d3294b4992e0ea396c4a Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:16:32 -0700 Subject: [PATCH 10/13] Use default manifest filename Both webpack-assets-manifest and external_asset_pipeline assume a default manifest filename of `manifest.json`. The only reason we weren't using this default before was because we had been using the StatsPlugin to produce a different `manifest.json` file. Now that we've removed the StatsPlugin, we can rely on the default webpack-assets-manifest and external_asset_pipeline configuration. --- config/application.rb | 1 - config/webpack.config.js | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/config/application.rb b/config/application.rb index c90ee76..32e7919 100644 --- a/config/application.rb +++ b/config/application.rb @@ -21,7 +21,6 @@ class Application < Rails::Application config.external_asset_pipeline.configure do |c| c.fall_back_to_sprockets = true c.assets_prefix = '/webpack' - c.manifest_filename = 'asset-manifest.json' end end end diff --git a/config/webpack.config.js b/config/webpack.config.js index 59a4a41..371772f 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -33,8 +33,7 @@ var config = { }, plugins: [ - // this must match config.external_asset_pipeline.manifest_filename - new WebpackAssetsManifest({ output: 'asset-manifest.json' }) + new WebpackAssetsManifest() ] }; From 12065ae71933321344588c253a5cd156eca48e88 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:27:32 -0700 Subject: [PATCH 11/13] Update comment in gitignore to avoid mentioning webpack-rails We stopped using webpack-rails, but we still want these entries in the gitignore, so we just made the comment more general. --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 52643d7..c53669e 100644 --- a/.gitignore +++ b/.gitignore @@ -12,6 +12,6 @@ !/log/.keep /tmp -# Added by webpack-rails +# Ignore node modules and compiled assets /node_modules /public/webpack From dd6a8c8614e328e6a2df58739c6c3990b7437076 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:29:44 -0700 Subject: [PATCH 12/13] Remove unnecessary comment from Procfile --- Procfile | 1 - 1 file changed, 1 deletion(-) diff --git a/Procfile b/Procfile index 9dabfe1..e084852 100644 --- a/Procfile +++ b/Procfile @@ -1,4 +1,3 @@ # Run Rails & Webpack concurrently -# Example file from webpack-rails gem rails: bundle exec rails server -p 3000 webpack: ./node_modules/.bin/webpack-dev-server --config config/webpack.config.js From 49088afa561eaa1d7b451c2d58528e3424300a75 Mon Sep 17 00:00:00 2001 From: Richard Macklin Date: Sat, 5 Oct 2019 14:30:19 -0700 Subject: [PATCH 13/13] Remove webpack-rails dependency We've replaced this gem (which is no longer maintained) with the external_asset_pipeline gem --- Gemfile | 1 - Gemfile.lock | 3 --- 2 files changed, 4 deletions(-) diff --git a/Gemfile b/Gemfile index d8e92d5..e4d3235 100644 --- a/Gemfile +++ b/Gemfile @@ -4,5 +4,4 @@ source 'https://rubygems.org' gem 'rails', '~> 5.0.0' gem 'external_asset_pipeline' -gem 'webpack-rails' gem 'foreman' diff --git a/Gemfile.lock b/Gemfile.lock index 26394cf..37e4d1e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -101,8 +101,6 @@ GEM thread_safe (0.3.6) tzinfo (1.2.5) thread_safe (~> 0.1) - webpack-rails (0.9.5) - rails (>= 3.2.0) websocket-driver (0.6.5) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.4) @@ -114,7 +112,6 @@ DEPENDENCIES external_asset_pipeline foreman rails (~> 5.0.0) - webpack-rails BUNDLED WITH 1.17.3