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 diff --git a/Gemfile b/Gemfile index 7c61d1a..e4d3235 100644 --- a/Gemfile +++ b/Gemfile @@ -3,5 +3,5 @@ source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.0' -gem 'webpack-rails' +gem 'external_asset_pipeline' gem 'foreman' diff --git a/Gemfile.lock b/Gemfile.lock index c543983..37e4d1e 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) @@ -99,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) @@ -109,9 +109,9 @@ PLATFORMS ruby DEPENDENCIES + external_asset_pipeline foreman rails (~> 5.0.0) - webpack-rails BUNDLED WITH 1.17.3 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 diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 3a0e306..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('application') %> + <%= javascript_include_tag 'main' %> <%= csrf_meta_tags %> diff --git a/config/application.rb b/config/application.rb index d6bb85b..32e7919 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,10 @@ 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' + 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 diff --git a/config/webpack.config.js b/config/webpack.config.js index 6436558..371772f 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -3,9 +3,9 @@ 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 +// this must match config.external_asset_pipeline.dev_server.port var devServerPort = 3808; // set TARGET=production on the environment to add asset fingerprints @@ -14,14 +14,14 @@ 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: { // 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/', @@ -33,15 +33,8 @@ var config = { }, plugins: [ - // must match config.webpack.manifest_filename - new StatsPlugin('manifest.json', { - // We only need assetsByChunkName - chunkModules: false, - source: false, - chunks: false, - modules: false, - assets: true - })] + new WebpackAssetsManifest() + ] }; if (production) { diff --git a/package.json b/package.json index 44b3845..c5faf60 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "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" } } diff --git a/webpack/application.js b/webpack/main.js similarity index 100% rename from webpack/application.js rename to webpack/main.js