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

導入

参考:

既存プロジェクトを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

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

概要

参考:

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

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

webpack の設定

参考:

Webpacker 3.0 でのWebpackの設定カスタマイズ – upinetree’s memo

webpackerを使ったrailsアプリを実行するとき、TypeError: environment.plugins.set is not a functionというエラーが出る – Qiita

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

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

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

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

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

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

Webpack 4 の設定

base

  • webpack.EnvironmentPlugin
  • CaseSensitivePathsPlugin
  • MiniCssExtractPlugin
  • WebpackAssetsManifest

production

  • CompressionPlugin
  • OptimizeCSSAssetsPlugin
  • UglifyJsPlugin

development

  • webpack.HotModuleReplacementPlugin (HMR用)
  • webpack.NamedModulesPlugin (HMR用)

rules

  • babel (js/jsx/js.erb/jsx.erb)
  • file (jpg/jpeg/png/gif/tiff/ico/svg/eot/otf/ttf/woff/woff2)
  • css (css)
  • sass (scss/sass)
  • module.css (css)
  • module.sass (scss/sass)

loaders

  • babel-loader
  • file-loader
  • style-loader
  • css-loader
  • post-css-loader
  • MiniCssExtractPlugin.loader (extractCSS用)
  • sass-loader

参考:

webpacker/webpack.md at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/base.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/production.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/development.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/babel.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/sass.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/get_style_rule.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/config_list.js at v4.0.0.pre.3 · rails/webpacker – GitHub

insert – webpacker/config_list.js at v4.0.0.pre.3 · rails/webpacker – GitHub

UglifyJsPlugin

参考:

webpack@4 の mode と minimize (UglifyJS) – 30歳からのプログラミング

UglifyJsPlugin – webpacker/production.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpack-contrib/uglifyjs-webpack-plugin: UglifyJS Plugin – GitHub

Optimization | Webpack [Official]

Webpack 4 – How to configure minimize? – Stack Overflow

プラグインの設定

参考:

Plugins – 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 の設定

参考:

Rails5.1 + Webpacker で Bootstrap4-beta を読み込む – Qiita

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

babel-loader

参考:

webpacker/babel.js at v3.5.5 · 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

Using ERB · Issue #1242 · rails/webpacker – GitHub

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

How to use webpacker plugins? · Issue #283 · rails/webpacker – GitHub

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

pretty

true に設定すると、webpacker-dev-server においてコンパイルの進捗を表示する

pretty: true

webpack-dev-server --progress --color で起動するのと同じになる

参考:

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

dev_server.hot_module_replacing?

参考:

webpacker/dev_server.rb at v4.0.0.pre.3 · rails/webpacker – GitHub

dev_server.running?

参考:

webpacker/dev_server.rb at v4.0.0.pre.3 · rails/webpacker – GitHub

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

max_old_space_size

参考:

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

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

devtool

// development
devtool: 'cheap-module-source-map'
// production
devtool: 'nosources-source-map'

参考:

webpacker/development.js at v4.0.0.pre.3 · rails/webpacker – GitHub

webpacker/production.js at v4.0.0.pre.3 · rails/webpacker – GitHub

Devtool | Webpack [Official]

Tagged:

コメントを残す

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