Rails 5: Webpacker公式README -- Webpack v4対応版（翻訳）｜TechRacho by BPS株式会社
本READMEの他に、以下のWebpacker公式ドキュメントの歩き方記事もどうぞ。これら2本で、Webpackerの公式ドキュメントは概観できるかと思います。次は公式のユースケースが欲しいです🍰🍵。 【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報 概要 MITライセンスに基いて翻訳・公開いたします。 READMEリポジトリ: webpacker/README.md at master · rails/webpacker 原文更新日: 2018/05/18 ライセンス: MIT 更新や誤りにお気づきの方は@hachi8833までお知らせください。 Webpackerを用いることで、JavaScriptのプリプロセッサ兼バンドラーであるwebpack 4.x.x+を簡単に使えるようになり、アプリ的なJavaScriptをRailsで管理できます。Webpa
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
webpack - EvalSourceMapDevToolPlugin
このプラグインにより、ソース マップ生成のよりきめ細かい制御が可能になります。また、 devtool 構成オプションの特定の設定によっても自動的に有効になります。 new webpack.EvalSourceMapDevToolPlugin(options); Options 次のオプションがサポートされています。 test ( string|RegExp|array ): 拡張子に基づいてモジュールのソース マップを含めます (デフォルトは .js および .css )。 include ( string|RegExp|array ): 指定された値に一致するモジュール パスのソース マップを含めます。 exclude ( string|RegExp|array ): 指定された値に一致するモジュールをソース マップの生成から除外します。 append ( string|function
Turbopackは本当にviteの10倍速いのか? - Qiita
経緯 VercelがNext13と共にTurbopackを公開しました。このTurbopack、Webpackの後継として登場し、Webpackの700倍速く、Viteの10倍速く動作するとのことです。しかし、その秒数はTurbopackが0.01秒、viteが0.09秒と書かれており、10倍と表現するにはやや誇張された値です。このマーケティングに不信感を抱いたVueとViteの開発者、Evan Youは自身で実際にTurbopackの性能とViteの性能を比較をされました。注意としてEvan YouはTurbopackを否定したいのではなく、健全なOSSコミュニティでの競争を望んでいるそうです。 以下はそのGoogle翻訳ベースの翻訳です。間違いも多分にあるでしょうから、詳細が気になる方は上のリンクよりご確認ください。 翻訳 VercelはRust製のWebpack、Turbopackの
【Turbopack】Webpackの正統後継、Turbopackが登場 - Qiita
2022/10/26、VercelはWebpackの正統後継を詠ったバンドルツール、Turbopackを発表しました。 以下はVercelのブログから、Introducing Turbopack: Rust-based successor to Webpackの紹介です。 Introducing Turbopack: Rust-based successor to Webpack Vercelの使命は、イノベーターが閃きを形作るのに必要なスピードと信頼性を提供することです。 昨年は、我々はNext.jsがアプリをバンドルするスピードを向上することに注力しました。 JavaScriptベースからRustベースのツールに移行するたびに、如実に効果が現れました。 Babelからの移行では、トランスパイルの速度が17倍になりました。 Terserの移行においては、minifyが6倍になり、さらに読
Introducing Turbopack: Rust-based successor to Webpack – Vercel
Vercel's mission is to provide the speed and reliability innovators need to create at the moment of inspiration. Last year, we focused on speeding up the way Next.js bundles your apps. Each time we moved from a JavaScript-based tool to a Rust-based one, we saw enormous improvements. We migrated away from Babel, which resulted in 17x faster transpilation. We replaced Terser, which resulted in 6x fa
既存Vue CLIプロジェクトのVite化
現行のプロジェクトをVue CLIからVite化したのでその作業メモ。 from @vue/cli-service@4.5.9 (webpack@4.46.0) Vue@2 Vuex to vite@2.8.4 (esbuild@0.14.21, rollup@2.67.2) Vue@3（予定） Pinia なぜvite化するか devServerやHMRに時間がかかり開発体験が悪くなってきた モダンなライブラリを導入しようとしてもエラーになってしまった（piniaが導入できなかった） viteにすれば解決する問題なのかは分からなかったが、webpack@1の頃から5年以上開発してきたプロジェクトのせいでいろいろしがらみが増えてしまい、まずは足回りをシンプルにしたかった 結果的にpiniaが導入できるようになった これまでも改善したい要望はあったが、その場その場では「更新するコスト＞そのま
レガシーなMPAアプリケーションをWebpackからViteに移行する話
どうもoreoです。 今回は、Ruby on RailsのMPAアプリケーションにおけるWebpackからViteへの移行を通じて得た知見を記載します。同じような技術スペックでVite移行を考えられている方の参考になれば幸いです！ 1 結論 まだリリースできていない(2022/10/16時点。リリース時期調整中。) 歴史あるアプリでの移行は非常に大変 しかし、開発体験向上やアプリケーションの課題発見など得られる恩恵は大きい 2 Vite移行を検討するに至った背景 弊社アプリは、Vue2.7+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。 エントリーポイントが多いことによる弊害で、サービス拡大に伴い
レガシーなMPAアプリケーションをwebpackからviteに移行する話
株式会社iCAREでは、Vue2.6(※2.7に移行中)+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。 エントリーポイントが多いことによる弊害で、サービス拡大に伴いビルド時間は長くなり、最近では開発サーバーの立ち上げに約2分も掛かるようになりました。これを改善すべく、Vue2.7化と併せてビルドシステムのWebpackからViteへの移行を試みています。 SPAへのVite導入等に関しては記事がありますが、レガシーなMPAアプリケーションでのVite移行に関する記事はあまりなく、移行できるか？等の不安や疑問を抱きながら実装を進めています。本LTでは、この取り組みを通して得た知見を共有させて頂きま
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
Next.js + Tailwind + CSS Modulesの環境にStorybookを入れる
Next.jsで作ったプロジェクトにStorybookを追加する方法について。 基本的にはStorybookの公式が公開しているポストGet started with Storybook and Next.jsの通りに設定すれば良いが、CSS ModulesやPostCSSといったCSS関連の部分などはWebpackの調整が必要になる。 webpackFinalを用いたWebpackの設定 StorybookでPostCSSを利用するためのプラグインとしてstorybookjs/addon-postcssが存在する。 これはStorybookのWebpackの設定にpostcss-loaderを追加し、postcss-loaderやcss-loader、style-loaderにそれぞれ任意のオプションを渡すことができるようにするプラグインである。 しかし以下のコードのように、loader
【Bun】新しいJavaScriptランタイムについてふわっとまとめた
JavaScriptランタイムと言えばnode。 nodeの代替としてdenoがありますが、新たにbunというものを知ったのでふわっとまとめてみました。次のリンクは、Bunを知るきっかけとなったものです。 トップのコメントを一部抜粋(DeepL翻訳) 私が興奮していることのひとつは、bun install です。 Linuxでは、シンプルなNext.jsアプリの依存関係を、現在利用できる他のnpmクライアントよりも20倍ほど速くインストールします。 Bunとは 「速くて All in One な Javascript ランタイム」 内容を見ていく前に、Bunへの注目度がわかるグラフをご覧ください。 7月6日からほぼ垂直にStarを獲得しており、7月11日までの五日間で約20倍になっています。すごい。 ここからは私が気になった内容をピックアップして紹介していきます。 All in One B
webpack を使って Sass をコンパイルする方法
webpack を使って Sass をコンパイルする方法 Sass を webpack を使ってコンパイルする方法の覚書です。webpack は JavaScript だけではなく、CSS や Sass をバンドルすることができます。 webpack 5 で新しく導入された Asset Modules など内容を version 5 に合わせて書き換えました。また、PostCSS Preset Env の使い方も追加しました（2022年1月5日）。 以下は Node.js がインストールされていることを前提にしています。また、主なパッケージのバージョンは以下になります（環境は Mac での例になります）。 sass（dart-sass）：1.45.2 webpack：5.65.0 webpack-cli：4.9.1 webpack-dev-server：4.7.2 node: 16.13.
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
モノリシックな Ruby on Rails サービスからの Webpacker の剥がし方 | 働くひとと組織の健康を創る iCARE
iCARE の提供しているサービス Carely では 2020年の 10月から半年ほどかけて Webpacker からの脱却を行いました。似たような記事はいくつかありますが、まったくの未着手から解説したものはないと思うので、記録をかねてまとめました。長めの記事になりますが同じことで困っている方の参考になれば幸いです はじめに - Carely の構成について もともとは Rails5 のスタンダードな構成だったものを、 Webpacker を導入して GraphQL + Vue2 の構成に移行。SPA ではなくエンドポイントごとにエントリーポイントがあるような構成になっています ルーティングなどは Rails に則りつつ、画面はほぼ Vue2 で構成されています。もちろん古い slim + sprockets の画面も残っているため coffee script のファイルも一部健在です
Webpack • Storybook docs
Storybook Webpack builder is the default builder for Storybook. This builder enables you to create a seamless development and testing experience for your components and provides an efficient way to develop UI components in isolation allowing you to leverage your existing Webpack configuration with Storybook. ConfigureBy default, Storybook provides zero-config support for Webpack and automatically
Webpacker使うなら最低限これだけは知っておいてほしいこと - Qiita
言いたいこと webpackをあまり知らない人がwebpackerを用いることで簡単に導入できるけど以下のことはちゃんと知っておいてほしかったり、考えてほしい。（切実） ビルドはRubyからコマンド実行してるけど、実際に発行しているnpm scriptはwebpack(-dev-sever) --config config/webpack/(development|test|production).jsなんで覚えておけ。 デフォルトでmultiple entryになっているのでSplitChunksPluginかCommonsChunkPluginの設定はとりあえず入れておけ。 本当にwebpackerは必要ですか？時期が来たら捨てろ。 webpackerの落とし穴 昨今では当たり前となっているwebpackの導入をwebpackをあまり理解していない人が簡単に入れれるという特徴がある。こ
Rails 7 will have three great answers to JavaScript in 2021+
September 6, 2021 Rails 7 will have three great answers to JavaScript in 2021+ Rails has been unapologetically full stack since the beginning. We've continuously sought to include ever-more default answers to all the major infrastructure questions posed by modern web development. From talking to a database, to sending and receiving emails, to connecting web sockets, to rendering HTML, to integrati
Webpackを使う時は、resolve.modulesの設定に気を付けよう。(特にModule not found: Error: Can't resolve～が表示された時) - Qiita
変更する時は、設定例にあるように "node_modules"を残します。 このページを見た方が、設定の全体像がつかみやすいかも。 Configuration - Options resolve.modulesに書いてある"node_modules"を、うっかり消してしまうと・・ ビルド時や、webpack-dev-serverの実行時などに、 Module not found: Error: Can't resolve ～～ という感じに、おこられます。 原因は、importとかrequireしているものが、node_modulesの中にあるから。 でも、はっきり言って、気づきません。 Issueを上げてる人もたまにいますが、 再現しないよ？npm installしてないんでしょ？と言われて終わりです。 ということで、Webpackのハマリぽいんとでした。 蛇足1 node_module
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
