Project

webpack-helpers

0.0
No release in over 3 years
Low commit activity in last 3 years
webpack-helpersak10m/webpack-helpersHomepageDocumentationSource CodeBug TrackerWiki
Make Ruby and Webpack as loosely coupled as possible.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Popularity
Downloads
6,319
Stars
1
Forks
0
Watchers
1
 Releases
Current version
0.1.3
Total releases
4
First release
2020-01-26
Latest release
2020-02-08
 Pull Requests
Open Pull Requests
13
Closed Pull Requests
6
Merged Pull Requests
12
Pull Request Acceptance Rate
38%
 Development
Primary Language
Ruby
Licenses
MIT
Average date of last 50 commits
2020-12-08
Reverse Dependencies
0

 Dependencies

Development

bundler
~> 2.1.3
minitest
~> 5.0
minitest-reporters
>= 0
rack-test
>= 0
rake
~> 12.0
rubocop
~> 0.78.0
rubocop-minitest
~> 0.5.1
rubocop-performance
~> 1.5.2

Runtime

rack-proxy
>= 0
 Project Readme

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.