ak10m / webpack-helpers

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
end

Rails support

By running the Rails generator command, you can generate a file in config/initializers to change the default configuration.

rails g webpack:config

helper

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.