Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ${{ matrix.os }}
strategy:
fail-fast: false
matrix:
os: [ubuntu-latest, macos-latest]
ruby: ['3.1', '3.3', '3.4']
node: ['20', '22']
steps:
- uses: actions/checkout@v4
- uses: ruby/setup-ruby@v1
with: { ruby-version: '${{ matrix.ruby }}', bundler-cache: true }
- uses: actions/setup-node@v4
with: { node-version: '${{ matrix.node }}' }
- run: bundle exec rake test
env: { WEBPACKER_CLI_E2E: '1' }
25 changes: 0 additions & 25 deletions .travis.yml

This file was deleted.

3 changes: 0 additions & 3 deletions Gemfile
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

# Specify your gem's dependencies in webpacker-cli.gemspec
gemspec
77 changes: 37 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,65 @@
[![Gem Version](https://badge.fury.io/rb/webpacker_cli.svg)](http://badge.fury.io/rb/webpacker_cli)
[![Build Status](https://travis-ci.org/danielpclark/webpacker-cli.svg)](https://travis-ci.org/danielpclark/webpacker-cli)
[![Build Status](https://github.com/danielpclark/webpacker-cli/actions/workflows/ci.yml/badge.svg)](https://github.com/danielpclark/webpacker-cli/actions)

# WebpackerCli

Bringing the impressive work of the Rails' **Webpacker** project **to be available for frameworks
other than Rails**. This is done by mocking the minimal amount of Rails for the Webpacker's
Rake commands to be able to run.
**Webpacker's conventions for any framework, without Rails.** Webpacker was abandoned by the Rails
team, and the old version of this tool depended on it (and on a mocked Rails app). Version 1.0
removes that dependency entirely: the gem has **no runtime dependencies**, and drives plain
**Webpack 5** through a small, generated `webpack.config.js` that lives in your project.

Webpacker itself takes Webpack, which has a primary focus for pre-processing JavaScript related
code, and make pre-processing other kinds of files such as CSS, SASS, Images, VueJS, React,
CoffeeScript, and other similar content as simple as a couple very minor edits. Without Webpacker
you would need to go through quite a bit of extra work to get Webpack to handle non JS items.
You keep the parts of Webpacker that matter:

This project makes asset packing and cache invalidation easy for any web framework by bringing
Webpacker's tooling to the command line. This cli tool is not meant to be used in a Rails project
_(at least not until it's designed to not overwrite a few files that exist in Rails)_.
* `config/webpacker.yml` (`source_path`, `source_entry_path`, `public_output_path`, `extensions`, …)
* every file in `app/javascript/packs` is an entry point
* content-hashed output in `public/packs` plus a `manifest.json` for cache invalidation

This project has the same dependencies/prerequisites as [Webpacker](https://github.com/rails/webpacker#prerequisites).
## Prerequisites

## Installation
Ruby 3.0+, Node.js 20.9+, and Yarn 1.x or npm.

Install it yourself as:
## Installation

$ gem install webpacker_cli

_Note: If you have trouble compiling the Nokogiri dependency on Linux try installing the following packages: `build-essential ruby-dev libxml2-dev`_

## Usage

General help is found with

$ webpacker-cli --help

The help menu will change after initialization within the project directory.

And get started using it in your target project with:
$ webpacker-cli init # create config + entry pack + package.json, install Node packages
$ webpacker-cli compile # build packs into public/packs
$ webpacker-cli watch # rebuild on change
$ webpacker-cli clobber # remove compiled packs and cache
$ webpacker-cli check # verify prerequisites
$ webpacker-cli info # tool versions

$ webpacker-cli init
The environment comes from `WEBPACKER_ENV`, `NODE_ENV` or `RAILS_ENV` (default `development`).
Production builds use content hashes and minification, e.g. `NODE_ENV=production webpacker-cli compile`.

This creates the minimum files for Webpacker to work and runs `bundle` & `rake webpacker:install`.
From here you have your configuration files for Webpack/Webpacker in the `config` directory.

To compile your assets you may now run:

$ webpacker-cli compile

To add support for another file type you can add a file to the `config/webpack/loaders`
directory. Then load it from `config/webpack/environment.js` and lastly add the file extension
to the `config/webpacker.yml` under `default.extensions`. Be sure to add the JS package with
a command like `yarn add`.
The generated `config/webpack/webpack.config.js` and `package.json` are yours to edit: add a loader
by installing its package and adding a rule, and add the extension to `default.extensions` in
`config/webpacker.yml`.

> Server Tip: It is recommended to compile your assets upon deploy rather than per web request.

Once your assets are compiled for deployment you will need to have your web application route
the assets by the file stored in `public/packs/manifest.json` which will look similar to:
Route assets using `public/packs/manifest.json`:

{
"application.js": "/packs/application-9578bdd78b657fa4358f.js",
"application.js.map": "/packs/application-9578bdd78b657fa4358f.js.map"
}

This way Webpacker handles cache invalidation for you whenever you make changes to your assets.
So the `manifest.json` is the key-value pair of data used to be substitued in your web page views
for the `src` references.
## Staying current with Webpack

`package.json` pins each tool to a **major version range** (`webpack ^5`, `webpack-cli ^6`, …), so
`yarn upgrade`/`npm update` picks up fixes without breaking changes. A new Webpack major is an
explicit, reviewed change to the templates in this gem (and to your project's config when you
choose to adopt it) — never a surprise. Existing projects are never overwritten by `init` unless
you pass `--force`.

### Migrating from 0.x

The Rails mock (`Gemfile`, `Rakefile`, `bin/rails`, `config/application.rb`) and the `webpacker:*`
rake tasks are gone. Delete those files, run `webpacker-cli init` for the new config, and move any
custom loaders from `config/webpack/loaders` into `webpack.config.js` rules.

## Example Integration

Expand Down
90 changes: 48 additions & 42 deletions bin/webpacker-cli
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,56 @@

$LOAD_PATH.unshift File.expand_path('../lib', __dir__)

require 'tty/command'
require 'webpacker_cli'

def init_menu
<<~INITIAL_MENU
To first initialize Webpacker in this project run the following command.

webpacker-cli init

This will generate the minimal content to use webpacker.

Dependencies:
* Ruby 2.2+
* Node.js 6.14.0+
* Yarn 1.x+
INITIAL_MENU
end

# For menu creation
def rake_webpacker
TTY::Command.
new(printer: :null).
run!('rake webpacker')
end

def usage
result = rake_webpacker
if result.failure?
puts init_menu
USAGE = <<~TEXT
webpacker-cli #{WebpackerCli::VERSION}

Usage: webpacker-cli <command> [options]

Commands:
init Create config, entry pack and package.json, then install Node packages
--force overwrite existing files
--skip-install don't install Node packages
compile Compile packs into the public output directory (writes manifest.json)
watch Compile and recompile on changes
clobber Remove compiled packs and the Webpack cache
check Verify Node, package manager and installed packages
info Show tool versions
version Show the webpacker-cli version

The environment is taken from WEBPACKER_ENV, NODE_ENV or RAILS_ENV (default: development).
Run `webpacker-cli init` first in your project directory.
TEXT

command, *args = ARGV

begin
case command
when 'init'
puts 'INITIALIZING WEBPACKER…'
WebpackerCli.init(force: args.include?('--force'), install: !args.include?('--skip-install'))
when 'compile'
WebpackerCli.compile
when 'watch'
WebpackerCli.watch
when 'clobber'
WebpackerCli.clobber
when 'check'
problems = WebpackerCli.check
puts(problems.empty? ? 'Everything looks good.' : problems)
exit(problems.empty? ? 0 : 1)
when 'info'
WebpackerCli.info.each { |k, v| puts "#{k}: #{v}" }
when 'version', '--version', '-v'
puts WebpackerCli::VERSION
when nil, 'help', '--help', '-h'
puts USAGE
else
puts result.out.gsub(/webpacker:/, "webpacker-cli ")
warn "Unknown command: #{command}\n\n#{USAGE}"
exit 1
end
end

case ARGV[0]
when /^(?:--help|-h)$/ then
usage
when /^init$/
puts "INITIALIZING WEBPACKER…"
WebpackerCli.init()
when /^[a-z:]+$/
TTY::Command.
new(color: false, uuid: false).
run("rake webpacker:#{ARGV.join(' ')}")
else
usage
rescue WebpackerCli::Error => e
warn e.message
exit 1
end
Loading
Loading