Webpack4でJavaScriptとCSSを結合しつつminfyする設定を書いてみた。contentWebpack4でJavaScriptとCSSを結合しつつminfyする設定を書いてみた。JavaScriptNode.jsscssフロントエンドwebpack4はじめにWebpackを用いてフロントエンドの環境を構築します。ヘッダーに出力するバナー情報。出力するECMAScipt(JavaScript)のバージョン。10(2019)まで指定可能だが対応しているブラウザがないので6(2015)にするのが無難。ライセンス情報は、[name].LICENSEに出力される。**/内のテキストのみ。},};使い方まずは、プロジェクトディレクトリで、コマンドラインから以下のコマンドを実行し、パッケージをインストールしよう。installコーディングを終えたら、以下のコマンドでhttp://localhost:3000/にdistディレクトリがドキュメントルートのサーバーを起動する。この設定では、同一ネットワークにあるPCからもアクセスできる。WifiでつながったiPhoneで同時チェックと言った使い方ができる。startsrc内のJavaScriptやScssを更新したときに自動的に再コンパイルされリロードするスグレモノ。実行結果はメモリに保持されるので高速な反面、distディレクトリ内のjsやcssが自動更新されるわけではないので注意。ESLintでコード整形を行う場合は、以下のコマンドを実行する。複数人で作業する場合、gitのpush時にhuskyなどで、このコマンドを自動実行するようにするといいかもしれない。bootstrapで普通にbootstrapをインストールする。次にapp.jsとapp.scssでbootstrapを呼び出す。全部使う場合はこれでいいがおすすめできない。使わないモジュールはコメントアウトしよう。'bootstrap/js/dist/tooltip'//ここから下に自分のコードを入れる別途_variables.scssを作成して、bootstrapの設定をオーバーライドする値を入れる。Emoji";と入れておこう。変数になっているところがポイント。この他変更できる値は、/node_modules/bootstrap/scss/_variables.scssを見ること。これをapp.scssから読み込む。使わないモジュールはコメントアウトしよう。ここから下に自分のコードを入れる。こんな感じでBootstrapに用意されている関数を使ってらくらくコーディングしよう。この例では、ブラウザの横のサイズに応じてcontainerの最大サイズを変更している。</body></html>すると、srcディレクトリ内構造はこうなっているはずである。startを実行すると、http://localhost:3000/にアクセスしたときこのHTMLが表示される。jsやscssを編集すると、ブラウザが自動的にリロードされその結果がすぐにわかる。更新履歴2020/01/02情報が古すぎたので色々書き直し。JS圧縮プログラムのuglifyをTetherに変えたなど。upLoginユーザーは見つかりませんでした。