Webpack::Helpers 
A library that makes Ruby and Webpack as loosely coupled as possible.
Installation
Add this line to your application's Gemfile:
gem 'webpack-helpers'And then execute:
$ bundle install
Or install it yourself as:
$ gem install webpack-helpers
Usage
Webpack::DevServer::Proxy
Rack Middleware for proxying access to a specific path to Webpack Dev Server.
# config.ru
require 'webpack'
require 'webpack/dev_server/proxy'
Webpack.configure do |c|
c.dev_server.url = 'http://localhost:9000'
c.dev_server.proxy_path = '/web/pack'
end
use Webpack::DevServer::Proxy, ssl_verify_none: true
run lambda {|env| [200, {'Content-Type' => 'text/plain'}, ['Hello']] }With a configuration like, access to /web/pack/logo.svg will be proxied to http://localhost:9000/logo.svg.
Webpack::Manifest::Entries
Handles the manifest.json file generated by Webpack.
# manifest.json
# {
# "script.js": "script-abcd1234.js",
# "style.css": "/bundles/style-abcd1234.css"
# "logo.svg": "https://cdn/logo-abcd1234.svg"
# }
require 'webpack/manifest'
manifest = Webpack::Manifest.load '/path/to/manifest.json'
manifest.lookup! 'script.js' # => 'script-abcd1234.js'
manifest.lookup! 'style.css' # => '/bundles/stype-abcd1234.css'
manifest.lookup! 'logo.svg' # => 'https://cdn/logo-abcd1234.svg'
manifest.lookup! 'README.md' # => raise Webpack::Manifest::Entries::MissingEntryError
manifest.lookup 'README.md' # => 'README.md'Webpack::Helpers
Use proxy_path and manifest.json to return the proper URI as seen by the application.
# manifest.json
# {
# "script.js": "script-abcd1234.js",
# "style.css": "/bundles/style-abcd1234.css"
# "logo.svg": "https://cdn/logo-abcd1234.svg"
# }
require 'webpack'
require 'webpack/helpers'
Webpack.configure do |c|
c.dev_server.url = 'http://localhost:9000'
c.dev_server.proxy_path = '/web/pack'
c.manifest.url = 'http://localhost:9000/manifest.json'
c.manifest.cache = false
end
class Helper
include Webpack::Helpers
end
helper = Helper.new
helper.webpack_bundle_path('script.js') # => '/web/pack/script-abcd1234.js'
helper.webpack_bundle_path('style.css') # => '/web/pack/bundles/style-abcd1234.css'
helper.webpack_bundle_path('logo.svg') # => 'https://cdn/logo-abcd1234.svg'
helper.webpack_bundle_path('README.md') # => '/web/pack/README.md'
# when `dev_server.proxy_path = false`
helper.webpack_bundle_path('script.js') # => 'script-abcd1234.js'
helper.webpack_bundle_path('style.css') # => '/bundles/style-abcd1234.css'
helper.webpack_bundle_path('logo.svg') # => 'https://cdn/logo-abcd1234.svg'
helper.webpack_bundle_path('README.md') # => 'README.md'Webpack::Testing::Helper
require "webpack/testing/helper"
Minitest::Test.include Webpack::Testing::Helper if defined? Minitest::Test
class Webpack::SomeTest < Minitest::Test
def test_some
mock_dev_server('/path/to/mock/files') do |srv|
# stub Webpack::DevServer.config
Webpack::DevServer.configure do |c|
c.url = "http://#{srv.host_with_port}"
end
# stub Webpack::Manifest.config
Webpack::Manifest.configure do |c|
c.url = "http://#{srv.host_with_port}/manifest.json"
end
# run Rack::Files server (random port)
assert_equal "localhost", srv.host
assert_equal 65432, srv.port # unused random port
assert_equal "localhost:65432", srv.host_with_port
assert_equal true, srv.running?
end
end
endRails support
By running the Rails generator command, you can generate a file in config/initializers to change the default configuration.
rails g webpack:confighelper
You can use a helper that generates HTML tags according to Webpack's manifest.json.
(using Webpack::Helpers generated URI)
- javascript_bundle_tag
- stylesheet_bundle_tag
- image_bundle_tag
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/ak10m/webpack-helpers.
License
The gem is available as open source under the terms of the MIT License.