Hi! webpack-rails is no longer being maintained. Please see #90 for more info.
webpack-rails gives you tools to integrate Webpack in to an existing Ruby on Rails application.
It will happily co-exist with sprockets but does not use it for production fingerprinting or asset serving. webpack-rails is designed with the assumption that if you're using Webpack you treat Javascript as a first-class citizen. This means that you control the webpack config, package.json, and use yarn to install Webpack & its plugins.
In development mode webpack-dev-server is used to serve webpacked entry points and offer hot module reloading. In production entry points are built in to public/webpack. webpack-rails uses stats-webpack-plugin to translate entry points in to asset paths.
It was designed for use at Marketplacer to assist us in migrating our Javascript (and possibly our SCSS) off of Sprockets. It first saw production use in June 2015.
Our examples show webpack-rails co-existing with sprockets (as that's how environment works), but sprockets is not used or required for development or production use of this gem.
This gem has been tested against Rails 4.2 and Ruby 2.2. Earlier versions of Rails (>= 3.2) and Ruby (>= 2.0) may work, but we haven't tested them.
We have a demo application: webpack-rails-demo
webpack-rails to your gemfilebundle install to install the gembundle exec rails generate webpack_rails:install to copy across example filesforeman start to start webpack-dev-server and rails server at the same timewebpack/application.js and write some codeTo add your webpacked javascript in to your app, add the following to the <head> section of your to your layout.html.erb:
<%= javascript_include_tag *webpack_asset_paths("application") %>
Take note of the splat (*): webpack_asset_paths returns an array, as one entry point can map to multiple paths, especially if hot reloading is enabled in Webpack.
If your webpack is configured to output both CSS and JS, you can use the extension: argument to filter which files are returned by the helper:
<%= javascript_include_tag *webpack_asset_paths('application', extension: 'js') %>
<%= stylesheet_link_tag *webpack_asset_paths('application', extension: 'css') %>
If you're using the webpack dev server's live reload feature (not the React hot reloader), you'll also need to include the following in your layout template:
<script src="http://localhost:3808/webpack-dev-server.js"></script>
Have a look at the files in the examples directory. Of note:
Procfile to run our rails server & the webpack dev server in development at the same timeconfig/webpack.config.jsnode_modules/.bin/public/webpackmanifest.jsonTo have the host evaluated at request-time, set host to a proc:
config.webpack.dev_server.host = proc { request.host }
This is useful when accessing your Rails app over the network (remember to bind both your Rails app and your WebPack server to 0.0.0.0).
If you're running webpack-dev-server as part of docker compose rather than foreman, you might find that the host and port that rails needs to use to retrieve the manifest isn't the same as the host and port that you'll be giving to the browser to retrieve the assets.
If so, you can set the manifest_host and manifest_port away from their default of localhost and port 3808.
In development, we make sure that the webpack-dev-server is running when browser tests are running.
In CI, we manually run webpack to compile the assets to public and set config.webpack.dev_server.enabled to false in our config/environments/test.rb:
config.webpack.dev_server.enabled = !ENV['CI']
Add rake webpack:compile to your deployment. It serves a similar purpose as Sprockets' assets:precompile task. If you're using Webpack and Sprockets (as we are at Marketplacer) you'll need to run both tasks - but it doesn't matter which order they're run in.
If you deploy to Heroku, you can add the special webpack-rails-buildpack in order to perform this rake task on each deployment.
If you're using [chunkhash] in your build asset filenames (which you should be, if you want to cache them in production), you'll need to persist built assets between deployments. Consider in-flight requests at the time of deployment: they'll receive paths based on the old manifest.json, not the new one.
Pull requests & issues welcome. Advice & criticism regarding webpack config approach also welcome.
Please ensure that pull requests pass both rubocop & rspec. New functionality should be discussed in an issue first.
FAQs
Unknown package
We found that webpack-rails demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.