Webpacker

参考:

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

Documentation for webpacker | RubyDoc.info

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

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

導入

参考:

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

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

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

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

Webpacker is installed – Misoca開発者ブログ

webpackerの導入・設定メモ – Qiita

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

Rails5.1.3でsassとjsの管理をSprocketsからWebpackerに移行した – Qiita

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

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

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

webpack の設定

参考:

webpacker/webpack.md at 3-x-stable · rails/webpacker – GitHub

resolve.alias

参考:

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

Configuration – webpacker/webpack.md at 3-x-stable · rails/webpacker – GitHub

Rails5.1 Webpacker Vue.js 動かそうとするとコンポネントエラーになる問題 – Qiita

CSS/Sass/SCSS の設定

参考:

webpacker/css.md at 3-x-stable · rails/webpacker – GitHub

app/javascript

参考:

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

アセットパイプラインから Webpacker に移行する

参考:

Rails5.1.3 + Webpacker 3.1でsassとjsの管理をSprocketsからWebpackerに移行する – GitHub

Rails4からあるassets配下の既存のJSコードをRails5.1より公式サポートしたwebpackerを利用してnode.js配下に移行する – さかなソフトブログ

Replacing Rails Asset Pipeline with Webpacker — Neon Tsunami

Goodbye Sprockets. Welcome Webpacker 3.0 – Alessandro Rodi – Medium

app/assets のリソースを使う

参考:

webpackerからapp/assets内のリソースを共用する – Qiita

webpacker/assets.md at 3-x-stable · rails/webpacker – GitHub

import-glob-loader

参考:

WebpackerでSassのglobパターンの一括importを有効にする – イソップブログ

Sass/SCSS で共通の変数、ミックスインを読み込む

参考:

Webpackerで共通のsassファイルを自動で読み込む – イソップブログ

webpack/sass-loaderでimport毎に共通ファイルを読み込ませる – Qiita

Something wrong with provided resources · Issue #35 · shakacode/sass-resources-loader – GitHub

indentedSyntax in Sass-resources-loader · Issue #25 · shakacode/sass-resources-loader – GitHub

shakacode/sass-resources-loader: SASS resources (e.g. variables, mixins etc.) loader for Webpack – GitHub

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

参考:

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

getEntryObject

参考:

webpacker/base.js at v3.5.5 · rails/webpacker – GitHub

ERB を使う

$ rails webpacker:install:erb

参考:

Rails 5.1 webpacker “import” a .js.erb file? – Stack Overflow

trouble with erb-loader, is not working with .vue.erb files · Issue #1297 · rails/webpacker – GitHub

How to load asset_pack_path images into .vue · Issue #1256 · rails/webpacker – GitHub

Unable to access Rails view helpers · Issue #33 · usabilityhub/rails-erb-loader – GitHub

Erb – rails/webpacker at 3-x-stable – GitHub

usabilityhub/rails-erb-loader: Embedded Ruby (.erb) webpack loader for Ruby projects – GitHub

rails-erb-loader-dependencies

参考:

Dependencies – rails-erb-loader/README.md at 5.4.2 · usabilityhub/rails-erb-loader – GitHub

PostCSS

参考:

Sass(SCSS)からwebpacker + PostCSSに移行してみるか – blog.unresolved.xyz

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

webpack-dev-server

参考:

webpacker/webpack-dev-server.md at 3-x-stable · rails/webpacker – GitHub

Rails5.1でCSSをwebpack-dev-serverによってHMR(ライブリロード)させる – Qiita

bin/webpack

参考:

`bin/webpack`を読んだ – AnyType

check_yarn_integrity

参考:

Webpackerを使っている人はwebpacker.check_yarn_integrityを有効にしよう | Yoshiyuki Hirano – Medium

stylesheet_pack_tag

参考:

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

public_file_server

config.public_file_server.enabled = true

参考:

ActionController::RoutingError (No route matches [GET] “/packs/index-effb542be2baccc64610.js” · Issue #1190 · rails/webpacker – GitHub

コンパイル時間

参考:

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

webpacker-pure-config/webpacker-entry

参考:

euxn23/webpacker-pure-config: Pure webpack way config for webpacker and rails – GitHub

euxn23/webpacker-entry: Generate webpack.config.entry suit to rails with webpacker – GitHub

Webpacker でやっていけるか!? Frontend on Rails – GitHub

Rails で webpack を直接使う方法

参考:

今日から簡単!Webpacker 完全脱出ガイド – pixiv inside

max_old_space_size

参考:

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

Tagged:

コメントを残す

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