Webpackで個々の資産を最小化する

Question

webpackを使用してWordPressのWebサイトを最適化したいと考えています。アプリケーションは単一のページアプリではなく、各ページに独自のスタイル、スクリプト、画像が必要です。 webpackを使用して、CSS、js、および画像を最小限に抑えたいと考えています。私は単一のバンドルファイルは必要ありません。

3つのcssファイルがあるフォルダでは、各ファイルを繰り返し処理して最小化したいと考えています。

css/ 
page.css ---> page.css(minimized) 
header.css ---> header.css(minimized) 
footer.css ---> footer.css(minimized) 

私はJSファイルと同じ操作を行うと、電気ショック療法のJPG、PNG、用画像最適化を使用したいと思います。これはwebpackで行うことができますか？もしそうなら、どのようにこれを行うことができますか？私は複数のエントリーポイントについて読んだことがあるが、それは私が必要とするものではないようだ。ありがとう！

Answer 1

いいえ、複数のエントリポイントでも1つの出力しか得られません。あなたができることは、あなたのwebpack.config.jsを包み込み、エントリーの設定変数をダイナミックに設定したラッピングスクリプトを書くことです。

擬似コード：

import glob from 'glob' 
import webpack from 'webpack' 
import config from './webpack.config' 

const files = glob.glob('**/my-entry-file.js'); 

files.forEach((file) => { 
    config.entry = file; 
    webpack(config); 
});