Webpack

webpack5でJSとSassをコンパイル(CSSを別ファイルに出力)

webpack5を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。 この記事では、以下の項目をコンパイル条件としています。 JavaScriptとCSSを別々のファイルで出力する。 出力先のCSSに自動でベンダープレフィックスを追加する。 production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。 development(開発環境用に)出力する場合 […]

「npm run production」実行時にエラー

Laravelで「npm run production」実行時に以下のエラーが出た。 [crayon-616cecfe59e50731432030/] 「npm run dev」実行時には出ず、「npm run production」の時だけ出た。 原因 多分Webpack関連のエラー?よくわからない。 けど、コンパイル関連のファイルがロックされている?っぽい。セキリティソフトやバックアップソフト […]

npmでBootstrapをインストールしてWebpackでコンパイルする方法(同時にjQueryも)

ホームページを作る時、BootstrapとJQueryを使う機会が多いんですが、今までは、それぞれのCDNから読み込んで使っていました。 今回は、npmを使ってプロジェクトに直接インストールしてみます。Bootstrapは、JQueryに依存しているので、JQueryも一緒にインストールします。 全体的な流れとしては、 ・node.js(npm)のインストール ・webpackの導入 ・Boots […]

Laravel Mixを使ってjavascriptをコンパイルする

Laravelでjavascriptを使う場合、public / jsフォルダ内に置いて、Bladeファイルで読み込めば動きますが、今回は、Laravel Mixを使って複数のjavascriptファイルをまとめてコンパイルしたものを読み込んでみたいと思います。 前提 以下がインストールされている。 ・Laravel Mix ・node.js ・npm jsファイルの書き方 jsファイル単体でもコ […]