webpack_dev_server

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内…

はじめに 環境 Rails + Vue.js Vue.jsの表示を確認 HomeControllerの作成 HomeController ルートの設定 Hello Vue! devサーバーの設定 参考 はじめに 今回はRailsとVue.jsを使う際に必要な設定などをまとめておきたいと思います。 環境 Rails 6.0.3.4 Ruby 2.6.6 Webpacker 4.0 Rails + Vue.js $ rails new sample_app --webpack=vue webpackオプションを使用し、Vue.jsを使用したアプリを作成 Vue.jsの表示を確認 HomeContr…

webpack-cliをバージョンアップして webpack-dev-server を実行した際に以下のエラーが出たので対応をメモ。 $ webpack-dev-server --config webpack/webpack.config.js internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:…

パーフェクトRuby on Rails 増補改訂版 4章のwebpackerについてまとめ パーフェクト Ruby on Rails 【増補改訂版】 (Perfect series)作者:すがわらまさのり,前島真一,橋立友宏,五十嵐邦明,後藤優一発売日: 2020/07/25メディア: 単行本（ソフトカバー） webpacker webpackerはwebpackをRailsから扱いやすくするラッパー app/javascript/packs/application.jsがエントリーファイルとなる。 以下のコマンドでエントリーファイルをもとにビルドを実行 $ bin/rails webpack…

Rails 使ってるのに Node.js とか Python とか云われても わからん... 環境 概要・状況 原因 解決 ログ全文 ログの見方 Links 環境 MacOS Big Sur Ver.11.1 anyenv + pyenv 概要・状況 Rais プロジェクトで yarn install したら node-sass をインストールするために node-gyp をインストールしようとして python2 が見つからなくて そこでコケた 原因 anyenv, pyenv を利用して Python のバージョン切り替え... 3系を利用していた 解決 Rails プロジェクト ディレク…

はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内…

こんにちは、たわらです。 ハンズオン型の教材を買って実践してみました。 実践した教材 これをやってみました。LineBotって作ったことなかったので、いい勉強になるかな、と思って。 こんな gem あるんだ、と勉強になったので、よかったです。 Ruby on Rails で宿泊検索 LINE Bot を作ろう！ | Techpit www.techpit.jp 楽天トラベルAPIを叩いてくれるLineBot キーワードを入れると、楽天トラベルAPIを叩いてくれて、宿泊施設を返してくれます。 熟練のかたは、単純だな、と思うかもしれませんが、LineBotすげー、とボクは思ってしまいました！ 学ん…

Fossa Advent Calendar 20日目 Laravel Mix v6.0.0リリース github.com ようやく、v6.0.0がリリースされました。 Webpack v5やVue3に対応するために、時間がかかったような印象があります。 変更された点を書いておきます。*1 Laravel Mix v5(webpack.mix.js) mix.webpackConfig({ resolve: { alias: { "@": path.resolve(__dirname, "Resources/assets/vuejs") } } }); mix.js(__dirname + "/…

こんにちは。 Eight 事業部でエンジニアをしている鳥山（@pvcresin）です。 最近は、持ち手部分に適度な厚みと重さがあるいい感じのカトラリー（食卓用のナイフ・フォーク等）を探すのにハマっています。 おすすめのものがある方はご一報いただければ幸いです。 さて今回は、webpack 用の loader である eslint-loader の使用をやめることで、ビルド時間を短縮した話をしたいと思います。

おはおはの民！ぱちお Advent Calendar 2020 の14日目の記事です。13日目は、ぱちお(@patioglass)さんの 【13日目】色々なぱちお【ぱちお Advent Calendar 2020】 - ぱちおのいろいろ。 でした。 adventar.org 最近アドカレ日付変わってからじゃない？？寝るまでが今日だよ、中学校で習わなかった？ React+TypeScript+Electronでタイマーアプリ作る github.com 備忘録記事です。 そしてリリースしたかったんですが、Macのビルドできなかったので、また正式にリリースできたら告知しま～～～～す・・・（まだリリー…

こんにちは。 二度目の登場のフロントエンド担当川口です。 この記事は HRBrainAdventCalendar 13日目の記事です。 今回も前回と同じくaxiosに絡んだ記事を書いていきます。 ユーザー環境の不具合が再現できない サービスで不具合報告があったが固有の環境でしか発生せず開発環境で再現できない。 一般に開放しているようなサービスであればそんな場合にもURL一つで本番環境を開いて再現できたりしますが、会員制サービスやBtoBサービスではそういうことも難しい。 そんな場面でもHARファイルとaxios-mock-adapterを使って開発環境で不具合再現する方法を紹介します。 HAR…

【今日の振り返り】 全体工程を考えながら製作を進めていく。事前に発生しそうな問題を想像して、発生の前に対処できるように参考資料を読む。 結局エラーにぶつかり悩むのは同じだが、できる限り衝撃を和らげようとする試み。 ウィザード形式で入力フォームを作り上げていく段階のため、5つのモデルを作成。 それぞれにアソシエーションを組み、あとはフォームになったところで、 この一連の流れをどういったrouteで組むかに悩み始める。 とはいえ悩んでいられる時間も限りはあるので、とりあえず進められる部分を進める。 ◯ Rails6にfont-awesome-railsを導入 ``` name@mbp tasuki…