webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 [Vue warn]: You are using the runtime-only build of Vue where the…

webpackの構成を作成していた時の備忘録です。 今回は、stylusからcssにコンパイルする過程で発生する現象ですが、cssでもsass(scss)でも発生しうる事象です。 また、mini-css-extract-pluginでcssファイルを外部出力する場合でも同じ現象が起こります。 web…

webpackの利点として、コンパイルしたスクリプトの容量を抑えてくれる機能が用意されています。 とはいえ、単純にwebpackを使うだけであれば触れる機会は少ない機能だと思います。 今回は、コードの圧縮方法について触れたいと思います。 webpackのライブラ…

フロントエンドで遷移するイベントを実装する時があります。 最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。 もちろん、全てdivでも何ら問題はありません。 しかし、何かしら遷移が発生する場合は、（好みの問題ではあ…

静的ページで構成されるページであっても、なるべくならテンプレートエンジンを使用して作りたいものです。 今回は、Pugテンプレートについて取り上げます。 pugjs.org Pugについては別の機会にするとして、webpackでコンパイルするための設定について記載し…

LaravelはフロントエンドコンパイルをするためのツールとしてLaravel Mixが導入されています。 laravel.com 初期状態でも十分使いやすいのですが、機能が多いプロジェクトの場合ではそのままでは使いづらいところがあります。 例えばページ毎に別のスタイル…

無償IDEで且つ軽いと言われているVisual Studio Code(VSCode) を触る機会がありました。 (※諸説あります。) 初期状態では英語ですので、日本語にする方法について記載します 環境 Macで使う想定ですが、Windowsでも手順は同じようです。 OS バージョン mac 1…

Laravelでテーブルに変更を加える場合、基本的にマイグレーションで指示を書きます。 マイグレーションを書く時は、必ず立ち上げ時に起動するup関数と、ロールバックやリセットで実行するdown関数を設定します。 新規のマイグレーションについては、テーブル…

Vueとバックエンドで共通の値を使いたい時があります。 シングルページアプリケーションの様にフロントとAPIで構成する場合は、APIでサーバーサイドとやり取りをすると言う方法が考えつきます。 しかし、設定値のためだけにAPIを使うと言うのは実装するのも…