エントリポイントをJSとCSSで2つ設定しています。出力されるJSファイルは「htdocs/js/app.js」になります。pluginsプロパティでMiniCssExtractPluginをインスタンス化し、出力ファイルを指定します。rulesプロパティにCSSの指定を行っています。最後に、出力したCSSファイルを読み込む記述をHTMLファイルに追記しておいます。src="js/app.js"></script></body></html>一通りの設定が終わったのでコンパイルを回して動作確認を行います。#FFFFFF;}ブラウザから確認してみます。出力されたCSSファイルが読み込まれ意図した通りの結果になった事を確認できました。付与する事で自動的にJSファイルがminifyされますが、CSSには適用されないので、個別に設定する必要があります。CSSのminifyを行う為に「optimize-css-assets-webpack-plugin」を導入しますが、同時にJS側のminifyも動作するように「terser-webpack-plugin」も導入します。}};インストールした2つを定数で読み込み、optimizationプロパティを追加しています。コンパイルを回して動作確認を行います。productionモードで回します。確認すると、両ファイルがminifyされて出力されている事が確認できます。SASSファイルをコンパイルするスタイルシート言語であるSASSのコンパイルを行いCSSを出力します。SCSSファイルを作成し、styleを記述していきます。assetsディレクトリ配下にsassディレクトリを作成し、その配下に以下3つのSCSSファイルを作成します。_style_b.scssそれぞれのSCSSファイルにstyleを定義していきます。"style_b";次に、SCSSファイルをロードしてCSSにコンパイル為に「sass-loader」と「node-sass」をインストールします。今回はソースマップも有効にします。production)を定数MODEにセットし、その値でソースマップの有効・無効を定数ENABLE_SOURCE_MAPにセットしています。コンパイルして動作確認を行います。}SCSSファイルがコンパイルされ、CSSファイルが書き出されている事が確認できました。scheme)してCSSファイルへ埋め込み出力します。styleで画像を扱う場合は、CSSスプライトと言って必要な画像を1つにまとめる事によってリクエスト数を削減する手法が用いられますが、画像自体をbase64エンコードでCSSファイルに埋め込んでしまう事でもリクエスト数を削減できます。URIに変換するwebpack用のローダーである「url-loader」をインストールします。}};rulesプロパティへ、画像ファイルに対してurl-loaderを用いる指定を行っています。HTMLは以下に変更しています。src="js/app.js"></script></body></html>新しいSCSSファイルを作成して画像を指定します。}}リストマークを画像にする指定になっています。コンパイルを行います。確認すると、画像ファイルがbase64エンコードされている事が確認できます。url(data:image/png;base64,....ブラウザから確認すると、正常に表示されている事が確認できます。まとめ以上で作業は終了です。webpackでは他にも様々な処理を扱えるので試してみてください。Mix(Webpack)を導入しsassやJavaScriptをコンパイル/minifyするLaravelにReactを導入する。SESを使ってAPIメール送信を行う(Mailableクラス&SimpleEmailService)2019.12.3MySQL8.0.16で追加されたCHECK制約を試してみる。RitoLaboこのサイトについて利用規約プライバシーポリシ。