Webpacker

参考:

rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub

ドキュメント

参考:

webpacker/docs at master · rails/webpacker – GitHub

Documentation for webpacker | RubyDoc.info

Webpacker 公式 README — Webpack v4 対応版 翻訳 | TechRacho

保存版 Rails 5 Webpacker 公式ドキュメントの歩き方 + 追加情報 | TechRacho

導入

参考:

Webpacker についてちゃんと調べてみた | UUUM 攻殻機動隊 エンジニアブログ

Webpacker への移行を機にフロントエンド開発を改善 | メドピア開発者ブログ

Webpacker 3 ではじめる Rails エンジニアのためのモダンフロントエンド入門 〜Sprockets を使わない Rails プロジェクト試案〜 | blog.tai2.net

Webpacker is installed | Misoca 開発者ブログ

webpacker の導入・設定メモ – Qiita

Rails & Webpacker でフロントエンド開発環境を整える – Qiita

Rails アプリのアセットを Webpacker で管理する | もばらぶエンジニアブログ

Rails アプリに Webpacker を導入する | Hachy

Rails で Webpacker を導入して CoffeeScript から ES2015 (ES6) に移行しました | Rista Tech Blog

Webpacker + React を導入する手順まとめ | vdeep

Asset Pipeline から Webpack へ 翻訳 | TechRacho

コンポーネントベースでアプリを書く 翻訳 | TechRacho

Webpack の詳細、ActionCable の実装と Heroku へのデプロイ 翻訳 | TechRacho

プロジェクトの設定

Webpacker を有効にして新しいプロジェクトを作成する。(Rails 5.1 以降で利用可能)

$ rails new web_app --webpack

Webpacker を既存のプロジェクトに導入する。

$ rails webpacker:install

参考:

webpacker の導入・設定メモ – Qiita

環境構築時に `require’: cannot load such file — bootsnap/setup (LoadError) | なんや書くところ

Installation – rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub

Rails 5.1

参考:

既存プロジェクトを Rails 5.1 にアップデートしたので、webpacker を使って、楽できる感じの JS (ES6) と Rails の開発環境を構築してみた | うちのいぬ Tech Blog

Rails 5.1 で控えめに webpacker を使ってフロントエンド環境構築 – Qiita

Rails 5.1.3 + Webpacker 3.1 で sass と js の管理を Sprockets から Webpacker に移行する – Qiita

Rails 5.1.3 で sass と js の管理を Sprockets から Webpacker に移行した – Qiita

Rails 5.1 のアプリケーション開発環境を準備してみる | 株式会社テクノブレーン

概要

参考:

Webpacker 使うなら最低限これだけは知っておいてほしいこと – Qiita

Webpacker を使った Rails での JavaScript 開発 | クックパッド開発者ブログ

Rails 5.1 から導入される webpacker.gem は本当に Rails のフロントエンド開発に福音をもたらすのか? – Qiita

app/javascript ディレクトリ

参考:

webpacker/folder-structure.md at v3.5.5 · rails/webpacker – GitHub

ディレクトリ構成のカスタマイズ

参考:

Webpacker のディレクトリ構成を Rails から切り離す形に変える方法 – Qiita

Rails Engine で Webpacker を使う

参考:

gregogalante commented on 4 Jul – How to use this gem from within rails engines? · Issue #348 · rails/webpacker – GitHub

dakarai/assets_management_tasks.rake at master · ideonetwork/dakarai – GitHub

How to use this gem from within rails engines? · Issue #348 · rails/webpacker – GitHub

Include files coming from engines · Issue #21 · rails/webpacker – GitHub

Turbolinks

参考:

Rails での部分的な javascript_pack_tag と turbolinks の共存 | Write Code or Die

bin/webpack コマンド

rails assets:precompile から Webpack でバンドルを実行する際に呼び出されるコマンド

インスペクタを接続してデバッグを行う。(node コマンドに --inspect-brk を付けて起動することに相当する。)

$ bin/webpack --debug

参考:

`bin/webpack`を読んだ | AnyType

Debugging your webpack config – webpacker/troubleshooting.md at v4.0.7 · rails/webpacker – GitHub

javascript_pack_tag

バンドルされたコードを読み込む。

参考:

javascript_pack_tag – webpacker/helper.rb at v4.0.7 · rails/webpacker – GitHub

stylesheet_pack_tag

extract_css: true の場合にスタイルシートを読み込む。

参考:

stylesheet_pack_tag – webpacker/helper.rb at v4.0.7 · rails/webpacker – GitHub

stylesheet_pack_tag not finding app/javascript/src/application.css in rails 5.1 with webpacker gem – Stack Overflow

ビューからフロントエンドに動的な値を渡す

参考:

rails の webpacker の packs 内の js に rails の値を展開したい – teratail

compile

参考:

compile – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub

run_webpack – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub

watched_files_digest

参考:

watched_files_digest – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub

record_compilation_digest – webpacker/compiler.rb at v4.0.7 · rails/webpacker – GitHub

コンパイル時間

参考:

Asset compile hangs on [Webpacker] Compiling assets · Issue #1217 · rails/webpacker – GitHub

max_old_space_size

export NODE_OPTIONS="--max-old-space-size=2048"

参考:

Webpacker のプロダクション環境での assets:precompile でこける | みかづきメモ

Rails5.1 の bin/webpacker-dev-server で JavaScript heap out of memory が起きた時の対処方 – Qiita

webpack の build で out of memory が出たら NODE_OPTIONS で使用メモリサイズを指定すれば OK | 趣味グラマの覚え書き

rails5.1 のプリコンパイルが終わらない (webpack がらみ) – teratail

How to run node with flag --max_old_space_size · Issue #1189 · rails/webpacker – GitHub

テスト環境の設定

参考:

webpacker/testing.md at master · rails/webpacker – GitHub

React

参考:

webpack を使った Rails 上での React 開発 | クックパッド開発者ブログ

WebpackRunner

webpack を実行するランナー

参考:

webpacker/webpack_runner.rb at v4.0.7 · rails/webpacker – GitHub

DevServerRunner

webpack-dev-server を実行するランナー

参考:

webpacker/dev_server_runner.rb at v4.0.7 · rails/webpacker – GitHub

Runner

ランナーの基本クラス

参考:

webpacker/runner.rb at v4.0.7 · rails/webpacker – GitHub

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA