webpack + Vue をデモ用アプリで動作確認

[kasai441]

• デモ用でvueを書いて画面に反映されることを確認したい
• ruumarkerプロジェクトに導入して動くことを確認したい

[kasai441]

Webpack + Vueの記事をいくつか収集

Rails に Webpack と Vue を導入しました！｜CAMPFIRE 開発チーム｜note

• 簡潔なので、読むのが難しい

RailsにWebpack+Vue.jsを、出来るだけ気楽に導入してみる - Qiita

• sprocketとwebpackを共存させている
  • できればsprocketをなくしたい。

【Vue Rails】Vue + Railsで"Hello Vue!"表示

• 手順だけ。これもsprocketと共存パターン？

webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ

• sprocketsなし

メンテ不能になったフロントエンド環境を立て直す話 - クラウドワークス エンジニアブログ

• webpacker + jest + eslint

[kasai441]

さらばWebpacker

Rails 7 replaces Webpacker with importmapped Hotwire as default JavaScript setup | Saeloun Blog

Ruby on Rails — Rails 7.0.1, Webpacker retirement and more

週刊Railsウォッチ: Webpackerが公式に引退宣言、『Everyday Rails』日本語版がRails 7に対応ほか（20220124前編）｜TechRacho by BPS株式会社

[kasai441]

[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない | Kabuku Developers Blog

• esbuildは早いけど、プラグインがなく、vue.jsなどを入れられない

[kasai441]

jsbundling-rails/switch_from_webpacker.md at main · rails/jsbundling-rails

• WebpackerからWebpackへの移行のガイド

webpack4でスタイルのみをエントリーし、別ファイルとして出力したときに生成される不要なJavaScriptを削除する方法 | フロントエンドBlog | ミツエーリンクス- FixStyleOnlyEntriesPlugin

webpack 4とmini-css-extract-pluginを使ってCSSを別ファイルに書き出す方法 | フロントエンドBlog | ミツエーリンクス

• MiniCssExtractPluginとVue.js

[kasai441]

スクラッチからWebpack+Babel+Vue 3を使う - Qiita

• Vueとbabelのビルドの参考に

webpackとBabelの基本を理解する(3) ―webpackとBabel編― - Qiita

• BabelとWebpackの詳しい説明

Configure Babel · Babel

• babel.config.jsの説明

[kasai441]

yarn addでbabelとvue関係のパッケージインストール
#82 に実行結果をコピペ
#82 (comment)

[kasai441]

とりあえず、Vueのビルドができた！