From 66eb6584105aae96f35cd5269eb5c213c4ffb7d4 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Sat, 31 Oct 2020 10:43:47 +0800
Subject: [PATCH] generate asset tags at compile time

---
 .env.example                                  |   3 -
 app/Http/Controllers/AdminController.php      |   6 +-
 app/Http/Controllers/HomeController.php       |  11 +-
 app/Http/View/Composers/FootComposer.php      |  39 ---
 app/Http/View/Composers/HeadComposer.php      |  36 ---
 app/Providers/AppServiceProvider.php          |   1 -
 app/Providers/ViewServiceProvider.php         |  14 +-
 app/Services/Webpack.php                      |  52 ----
 config/app.php                                |  13 -
 package.json                                  |   5 +-
 resources/assets/src/scripts/homePage.ts      |   1 -
 resources/views/assets/.gitignore             |   2 +
 resources/views/errors/base.twig              |   1 +
 resources/views/home.twig                     |   7 +-
 resources/views/setup/base.twig               |   5 +-
 resources/views/shared/foot.twig              |   2 +
 resources/views/shared/head.twig              |   5 +
 .../ControllersTest/OptionsControllerTest.php |   1 -
 .../ControllersTest/SetupControllerTest.php   |   1 -
 .../ComposersTest/FootComposerTest.php        |  33 +-
 tests/ServicesTest/WebpackTest.php            |  61 ----
 tools/HtmlWebpackEnhancementPlugin.ts         |  82 +++++
 tools/build.ps1                               |   7 -
 webpack.config.ts                             |  43 ++-
 yarn.lock                                     | 282 ++++++++++++++----
 25 files changed, 371 insertions(+), 342 deletions(-)
 delete mode 100644 app/Services/Webpack.php
 create mode 100644 resources/views/assets/.gitignore
 delete mode 100644 tests/ServicesTest/WebpackTest.php
 create mode 100644 tools/HtmlWebpackEnhancementPlugin.ts

diff --git a/.env.example b/.env.example
index 36cccefc..057cfceb 100644
--- a/.env.example
+++ b/.env.example
@@ -2,9 +2,6 @@ APP_DEBUG=false
 APP_ENV=production
 APP_FALLBACK_LOCALE=en
 
-ASSET_ENV=production
-ASSET_URL=
-
 DB_CONNECTION=mysql
 DB_HOST=localhost
 DB_PORT=3306
diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index ab0ec9af..ea34ca01 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -125,11 +125,7 @@ class AdminController extends Controller
                     'version' => config('app.version'),
                     'env' => config('app.env'),
                     'debug' => config('app.debug') ? trans('general.yes') : trans('general.no'),
-                    'commit' => Str::limit(
-                        $commit ?? resolve(\App\Services\Webpack::class)->commit,
-                        16,
-                        ''
-                    ),
+                    'commit' => Str::limit($commit ?? '', 16, ''),
                     'laravel' => app()->version(),
                 ],
                 'server' => [
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 3481466c..218a3acd 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -2,12 +2,11 @@
 
 namespace App\Http\Controllers;
 
-use App\Services\Webpack;
 use Illuminate\Support\Arr;
 
 class HomeController extends Controller
 {
-    public function index(Webpack $webpack)
+    public function index()
     {
         return view('home')
             ->with('user', auth()->user())
@@ -15,13 +14,7 @@ class HomeController extends Controller
             ->with('transparent_navbar', (bool) option('transparent_navbar', false))
             ->with('fixed_bg', option('fixed_bg'))
             ->with('hide_intro', option('hide_intro'))
-            ->with('home_pic_url', option('home_pic_url') ?: config('options.home_pic_url'))
-            ->with('home_page_css', $webpack->url('home.css'))
-            ->with(
-                'home_page_css_loader',
-                config('app.asset.env') === 'development' ? $webpack->url('home.js') : null
-            )
-            ->with('app_js', $webpack->url('app.js'));
+            ->with('home_pic_url', option('home_pic_url') ?: config('options.home_pic_url'));
     }
 
     public function apiRoot()
diff --git a/app/Http/View/Composers/FootComposer.php b/app/Http/View/Composers/FootComposer.php
index 2b0fbbdb..5ba3bbf1 100644
--- a/app/Http/View/Composers/FootComposer.php
+++ b/app/Http/View/Composers/FootComposer.php
@@ -3,19 +3,15 @@
 namespace App\Http\View\Composers;
 
 use App\Services\Translations\JavaScript;
-use App\Services\Webpack;
 use Blessing\Filter;
 use Illuminate\Contracts\Events\Dispatcher;
 use Illuminate\Http\Request;
-use Illuminate\Support\Str;
 use Illuminate\View\View;
 
 class FootComposer
 {
     protected Request $request;
 
-    protected Webpack $webpack;
-
     protected JavaScript $javascript;
 
     protected Dispatcher $dispatcher;
@@ -24,13 +20,11 @@ class FootComposer
 
     public function __construct(
         Request $request,
-        Webpack $webpack,
         JavaScript $javascript,
         Dispatcher $dispatcher,
         Filter $filter
     ) {
         $this->request = $request;
-        $this->webpack = $webpack;
         $this->javascript = $javascript;
         $this->dispatcher = $dispatcher;
         $this->filter = $filter;
@@ -50,39 +44,6 @@ class FootComposer
         $scripts[] = [
             'src' => $this->javascript->generate($locale),
         ];
-        if (Str::startsWith(config('app.asset.env'), 'dev')) {
-            $scripts[] = [
-                'src' => $this->webpack->url('style.js'),
-                'async' => true,
-                'defer' => true,
-            ];
-        } elseif (!$this->request->is('/')) {
-            $scripts[] = [
-                'src' => 'https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js',
-                'integrity' => 'sha256-Ag0WTc8xFszCJo1qbkTKp3wBMdjpjogsZDAhnSge744=',
-                'crossorigin' => 'anonymous',
-            ];
-            $scripts[] = [
-                'src' => 'https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js',
-                'integrity' => 'sha256-k8tzaSH8ucPwbsHEO4Wk5szE9zERNVz3XQynfyT66O0=',
-                'crossorigin' => 'anonymous',
-            ];
-        }
-        $scripts[] = [
-            'src' => 'https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0.5/dist/admin-lte.min.js',
-            'integrity' => 'sha256-8RoBtV28TLYWlTMCRwqGv4NQW9bgc4jZphsQV3iLV4g=',
-            'crossorigin' => 'anonymous',
-        ];
-        if ($this->request->is('/')) {
-            $scripts[] = [
-                'src' => $this->webpack->url('home.js'),
-            ];
-        } else {
-            $scripts[] = [
-                'src' => $this->webpack->url('app.js'),
-            ];
-        }
-
         $scripts = $this->filter->apply('scripts', $scripts);
 
         $view->with([
diff --git a/app/Http/View/Composers/HeadComposer.php b/app/Http/View/Composers/HeadComposer.php
index 188be8a8..85c4da3f 100644
--- a/app/Http/View/Composers/HeadComposer.php
+++ b/app/Http/View/Composers/HeadComposer.php
@@ -2,7 +2,6 @@
 
 namespace App\Http\View\Composers;
 
-use App\Services\Webpack;
 use Blessing\Filter;
 use Illuminate\Contracts\Events\Dispatcher;
 use Illuminate\Http\Request;
@@ -12,8 +11,6 @@ use Illuminate\View\View;
 
 class HeadComposer
 {
-    protected Webpack $webpack;
-
     protected Dispatcher $dispatcher;
 
     protected Request $request;
@@ -21,12 +18,10 @@ class HeadComposer
     protected Filter $filter;
 
     public function __construct(
-        Webpack $webpack,
         Dispatcher $dispatcher,
         Request $request,
         Filter $filter
     ) {
-        $this->webpack = $webpack;
         $this->dispatcher = $dispatcher;
         $this->request = $request;
         $this->filter = $filter;
@@ -85,37 +80,6 @@ class HeadComposer
     public function injectStyles(View $view)
     {
         $links = [];
-        $links[] = [
-            'rel' => 'stylesheet',
-            'href' => 'https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0.5/dist/admin-lte.min.css',
-            'integrity' => 'sha256-zG+BobiRcnWbKPGtQ++LoogyH9qSHjhBwhbFFP8HbDM=',
-            'crossorigin' => 'anonymous',
-        ];
-        $links[] = [
-            'rel' => 'preload',
-            'as' => 'font',
-            'href' => 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/webfonts/fa-solid-900.woff2',
-            'crossorigin' => 'anonymous',
-        ];
-        $links[] = [
-            'rel' => 'preload',
-            'as' => 'font',
-            'href' => 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/webfonts/fa-regular-400.woff2',
-            'crossorigin' => 'anonymous',
-        ];
-        $links[] = [
-            'rel' => 'stylesheet',
-            'href' => 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css',
-            'integrity' => 'sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=',
-            'crossorigin' => 'anonymous',
-        ];
-        if (!$this->request->is('/') && config('app.asset.env') !== 'development') {
-            $links[] = [
-                'rel' => 'stylesheet',
-                'href' => $this->webpack->url('style.css'),
-                'crossorigin' => 'anonymous',
-            ];
-        }
         $links = $this->filter->apply('head_links', $links);
         $view->with('links', $links);
         $view->with('inline_css', option('custom_css'));
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 9040af4e..264d18f1 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -14,7 +14,6 @@ class AppServiceProvider extends ServiceProvider
         $this->app->singleton('cipher', 'App\Services\Cipher\\'.config('secure.cipher'));
         $this->app->singleton(Services\Option::class);
         $this->app->alias(Services\Option::class, 'options');
-        $this->app->singleton(Services\Webpack::class);
     }
 
     public function boot(Request $request)
diff --git a/app/Providers/ViewServiceProvider.php b/app/Providers/ViewServiceProvider.php
index 33788334..499a4493 100644
--- a/app/Providers/ViewServiceProvider.php
+++ b/app/Providers/ViewServiceProvider.php
@@ -3,14 +3,12 @@
 namespace App\Providers;
 
 use App\Http\View\Composers;
-use App\Services\Webpack;
 use Illuminate\Support\ServiceProvider;
-use Illuminate\Support\Str;
 use View;
 
 class ViewServiceProvider extends ServiceProvider
 {
-    public function boot(Webpack $webpack)
+    public function boot()
     {
         View::composer([
             'home',
@@ -66,14 +64,8 @@ class ViewServiceProvider extends ServiceProvider
 
         View::composer('shared.foot', Composers\FootComposer::class);
 
-        View::composer(['errors.*', 'setup.*'], function ($view) use ($webpack) {
-            // @codeCoverageIgnoreStart
-            if (Str::startsWith(config('app.asset.env'), 'dev')) {
-                $view->with(['scripts' => [$webpack->url('spectre.js')]]);
-            } else {
-                $view->with('styles', [$webpack->url('spectre.css')]);
-            }
-            // @codeCoverageIgnoreEnd
+        View::composer('assets.*', function ($view) {
+            $view->with('cdn_base', option('cdn_address', ''));
         });
     }
 }
diff --git a/app/Services/Webpack.php b/app/Services/Webpack.php
deleted file mode 100644
index db644769..00000000
--- a/app/Services/Webpack.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace App\Services;
-
-use Illuminate\Filesystem\Filesystem;
-use Illuminate\Routing\UrlGenerator;
-use Illuminate\Support\Arr;
-use Illuminate\Support\Str;
-
-class Webpack
-{
-    protected array $manifest = [];
-
-    protected Option $options;
-
-    protected UrlGenerator $urlGenerator;
-
-    public function __construct(
-        Filesystem $filesystem,
-        Option $options,
-        UrlGenerator $urlGenerator
-    ) {
-        $path = public_path('app/manifest.json');
-        if ($filesystem->exists($path)) {
-            $this->manifest = json_decode($filesystem->get($path), true);
-        }
-
-        $this->options = $options;
-        $this->urlGenerator = $urlGenerator;
-    }
-
-    public function __get(string $path)
-    {
-        return Arr::get($this->manifest, $path, '');
-    }
-
-    public function url(string $path): string
-    {
-        if (Str::startsWith(config('app.asset.env'), 'dev')) {
-            $root = config('app.asset.url').':8080';
-
-            return $this->urlGenerator->assetFrom($root, $path);
-        } else {
-            $path = $this->$path;
-            $cdn = $this->options->get('cdn_address');
-
-            return $this->urlGenerator->assetFrom($cdn, "/app/$path");
-        }
-    }
-}
diff --git a/config/app.php b/config/app.php
index a291a36a..f078ecad 100644
--- a/config/app.php
+++ b/config/app.php
@@ -66,19 +66,6 @@ return [
 
     'url' => env('APP_URL', 'http://localhost'),
 
-    /*
-    |--------------------------------------------------------------------------
-    | Assets
-    |--------------------------------------------------------------------------
-    |
-    | This is related to front-end assets. The asset URL is only available for
-    | development, not for production.
-    */
-    'asset' => [
-        'env' => env('ASSET_ENV', 'production'),
-        'url' => env('ASSET_URL', 'http://localhost'),
-    ],
-
     /*
     |--------------------------------------------------------------------------
     | Application Timezone
diff --git a/package.json b/package.json
index d042a1c4..050aa895 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "@types/tween.js": "^18.5.0",
     "@types/webpack": "^4.41.18",
     "@types/webpack-dev-server": "^3.11.0",
-    "@types/webpack-manifest-plugin": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",
     "autoprefixer": "^9.8.0",
@@ -77,6 +76,7 @@
     "eslint": "^7.4.0",
     "eslint-formatter-beauty": "^3.0.0",
     "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.5.0",
     "jest": "^26.6.1",
     "jest-extended": "^0.11.5",
     "jquery": "^3.5.1",
@@ -92,8 +92,7 @@
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-manifest-plugin": "^2.2.0"
+    "webpack-dev-server": "^3.11.0"
   },
   "browserslist": [
     "> 1%",
diff --git a/resources/assets/src/scripts/homePage.ts b/resources/assets/src/scripts/homePage.ts
index 3d858dbc..b8ba8f38 100644
--- a/resources/assets/src/scripts/homePage.ts
+++ b/resources/assets/src/scripts/homePage.ts
@@ -1,4 +1,3 @@
-import '@/styles/home.css'
 import './i18n'
 import { getExtraData } from './extra'
 
diff --git a/resources/views/assets/.gitignore b/resources/views/assets/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/resources/views/assets/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/resources/views/errors/base.twig b/resources/views/errors/base.twig
index e8a3c16e..bca2db17 100644
--- a/resources/views/errors/base.twig
+++ b/resources/views/errors/base.twig
@@ -6,6 +6,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="robots" content="noindex,nofollow">
     <title>{% block title %}{% endblock %} - {{ site_name }}</title>
+    {{ include('assets.spectre', ignore_missing = true) }}
     {% for style in styles %}
       <link rel="stylesheet" href="{{ style }}">
     {% endfor %}
diff --git a/resources/views/home.twig b/resources/views/home.twig
index 18d3cbc7..61d27228 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -2,7 +2,6 @@
 <html lang="{{ locale }}">
   <head>
     {{ include('shared.head') }}
-    <link rel="stylesheet" href="{{ home_page_css }}" crossorigin="anonymous">
     <link rel="preload" as="image" href="{{ home_pic_url }}">
     <title>{{ site_name }}</title>
     <style>
@@ -14,9 +13,9 @@
         {% endif %}
       }
     </style>
+    {{ include('assets.home-css', ignore_missing = true) }}
     <link rel="prefetch" as="script" href="https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js" crossorigin="anonymous">
     <link rel="prefetch" as="script" href="https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js" crossorigin="anonymous">
-    <link rel="prefetch" as="script" href="{{ app_js }}" crossorigin="anonymous">
   </head>
 
   <body class="hold-transition layout-top-nav">
@@ -149,12 +148,10 @@
       </div>
     </div>
 
-    {% if home_page_css_loader %}
-      <script src="{{ home_page_css_loader }}" crossorigin="anonymous"></script>
-    {% endif %}
     <script type="application/json" id="blessing-extra">
       {{ {transparent_navbar: transparent_navbar}|json_encode|raw }}
     </script>
+    {{ include('assets.home', ignore_missing = true) }}
     {{ include('shared.foot') }}
   </body>
 </html>
diff --git a/resources/views/setup/base.twig b/resources/views/setup/base.twig
index 2c7887cb..499bf3eb 100644
--- a/resources/views/setup/base.twig
+++ b/resources/views/setup/base.twig
@@ -5,9 +5,8 @@
     <meta name="viewport" content="width=device-width">
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="robots" content="noindex,nofollow">
-    <title>
-      {% block title %}{{ trans('setup.wizard.master.title') }}{% endblock %}
-    </title>
+    <title>{% block title %}{{ trans('setup.wizard.master.title') }}{% endblock %}</title>
+    {{ include('assets.spectre', ignore_missing = true) }}
     {% for style in styles %}
       <link rel="stylesheet" href="{{ style }}">
     {% endfor %}
diff --git a/resources/views/shared/foot.twig b/resources/views/shared/foot.twig
index 99d62813..a6629d5f 100644
--- a/resources/views/shared/foot.twig
+++ b/resources/views/shared/foot.twig
@@ -1,3 +1,5 @@
+<script src="https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0.5/dist/admin-lte.min.js" integrity="sha256-8RoBtV28TLYWlTMCRwqGv4NQW9bgc4jZphsQV3iLV4g=" crossorigin="anonymous"></script>
+{{ include('assets.app', ignore_missing = true) }}
 {% for script in scripts %}
   <script{% for attribute, value in script %} {{ attribute }}="{{ value }}"{% endfor %}></script>
 {% endfor %}
diff --git a/resources/views/shared/head.twig b/resources/views/shared/head.twig
index a39c7622..34c3b8d7 100644
--- a/resources/views/shared/head.twig
+++ b/resources/views/shared/head.twig
@@ -12,6 +12,11 @@
 {% endif %}
 <script id="blessing-globals" type="application/json">{{ blessing|json_encode|raw }}</script>
 <script src="{{ url('/meta.js') }}"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@blessing-skin/admin-lte@3.0.5/dist/admin-lte.min.css" integrity="sha256-zG+BobiRcnWbKPGtQ++LoogyH9qSHjhBwhbFFP8HbDM=" crossorigin>
+<link rel="preload" as="font" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/webfonts/fa-solid-900.woff2" crossorigin>
+<link rel="preload" as="font" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/webfonts/fa-regular-400.woff2" crossorigin>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin>
+{{ include('assets.style', ignore_missing = true) }}
 {% for link in links %}
   <link{% for attribute, value in link %} {{ attribute }}="{{ value|raw }}"{% endfor %}>
 {% endfor %}
diff --git a/tests/HttpTest/ControllersTest/OptionsControllerTest.php b/tests/HttpTest/ControllersTest/OptionsControllerTest.php
index 5eb8d6b4..ed739ad8 100644
--- a/tests/HttpTest/ControllersTest/OptionsControllerTest.php
+++ b/tests/HttpTest/ControllersTest/OptionsControllerTest.php
@@ -180,7 +180,6 @@ class OptionsControllerTest extends BrowserKitTestCase
         $this->visit('/admin/resource')
             ->type('', 'cdn_address')
             ->press('submit_resources');
-        $this->visit('/')->dontSee('url/app/app.js');
 
         $this->visit('/admin/resource')
             ->see(trans('options.cache.driver', ['driver' => config('cache.default')]))
diff --git a/tests/HttpTest/ControllersTest/SetupControllerTest.php b/tests/HttpTest/ControllersTest/SetupControllerTest.php
index 4abe17c5..63306e7a 100644
--- a/tests/HttpTest/ControllersTest/SetupControllerTest.php
+++ b/tests/HttpTest/ControllersTest/SetupControllerTest.php
@@ -14,7 +14,6 @@ class SetupControllerTest extends TestCase
     public function setUp(): void
     {
         parent::setUp();
-        $this->spy(\App\Services\Webpack::class);
     }
 
     public function testDatabase()
diff --git a/tests/HttpTest/ViewTest/ComposersTest/FootComposerTest.php b/tests/HttpTest/ViewTest/ComposersTest/FootComposerTest.php
index ac76ccc4..82addce7 100644
--- a/tests/HttpTest/ViewTest/ComposersTest/FootComposerTest.php
+++ b/tests/HttpTest/ViewTest/ComposersTest/FootComposerTest.php
@@ -4,7 +4,6 @@ namespace Tests;
 
 use App\Models\User;
 use App\Services\Translations\JavaScript;
-use App\Services\Webpack;
 use Event;
 use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Symfony\Component\DomCrawler\Crawler;
@@ -15,36 +14,22 @@ class FootComposerTest extends TestCase
 
     public function testInjectJavaScript()
     {
+        $this->mock(JavaScript::class, function ($mock) {
+            $mock->shouldReceive('generate')
+                ->with('en')
+                ->atLeast(1)
+                ->andReturn('en.js');
+        });
         option([
             'custom_js' => '"<div></div>"</script><h1 id=disallowed></h1><script>',
         ]);
         $user = User::factory()->create();
         $this->actingAs($user);
-        $this->get('/user')->assertSee('"<div></div>"', false);
+        $this->get('/user')
+            ->assertSee('"<div></div>"', false)
+            ->assertSee('en.js');
         $crawler = new Crawler($this->get('/user')->getContent());
         $this->assertCount(0, $crawler->filter('#disallowed'));
-
-        config(['app.asset.env' => 'development']);
-        $this->mock(JavaScript::class, function ($mock) {
-            $mock->shouldReceive('generate')
-                ->with('en')
-                ->once()
-                ->andReturn('en.js');
-        });
-        $this->mock(Webpack::class, function ($mock) {
-            $mock->shouldReceive('url')->with('style.css');
-            $mock->shouldReceive('url')->with('skins/skin-blue.min.css');
-            $mock->shouldReceive('url')
-                ->with('style.js')
-                ->atLeast(1)
-                ->andReturn('style.js');
-            $mock->shouldReceive('url')
-                ->with('app.js')
-                ->once()
-                ->andReturn('app.js');
-        });
-
-        $this->get('/user')->assertSee('en.js')->assertSee('app.js');
     }
 
     public function testAddExtra()
diff --git a/tests/ServicesTest/WebpackTest.php b/tests/ServicesTest/WebpackTest.php
deleted file mode 100644
index fe96b5f3..00000000
--- a/tests/ServicesTest/WebpackTest.php
+++ /dev/null
@@ -1,61 +0,0 @@
-<?php
-
-namespace Tests;
-
-use App\Services\Webpack;
-use Illuminate\Filesystem\Filesystem;
-
-class WebpackTest extends TestCase
-{
-    public function testManifest()
-    {
-        $this->mock(Filesystem::class, function ($mock) {
-            $mock->shouldReceive('exists')
-                ->with(public_path('app/manifest.json'))
-                ->once()
-                ->andReturn(true);
-
-            $mock->shouldReceive('get')
-                ->with(public_path('app/manifest.json'))
-                ->once()
-                ->andReturn(json_encode(['a' => 'b']));
-        });
-
-        $this->app->forgetInstance(Webpack::class);
-        $webpack = $this->app->make(Webpack::class);
-        $this->assertEquals('b', $webpack->{'a'});
-        $this->assertEquals('', $webpack->{'nope'});
-    }
-
-    public function testUrl()
-    {
-        $this->mock(Filesystem::class, function ($mock) {
-            $mock->shouldReceive('exists')
-                ->with(public_path('app/manifest.json'))
-                ->twice()
-                ->andReturn(true);
-
-            $mock->shouldReceive('get')
-                ->with(public_path('app/manifest.json'))
-                ->twice()
-                ->andReturn(json_encode(['a' => 'b']));
-        });
-
-        $this->app->forgetInstance(Webpack::class);
-        $webpack = $this->app->make(Webpack::class);
-        $this->assertEquals('/app/b', $webpack->url('a'));
-
-        $this->mock(\App\Services\Option::class, function ($mock) {
-            $mock->shouldReceive('get')
-                ->with('cdn_address')
-                ->once()
-                ->andReturn('http://cdn.test');
-        });
-        $this->app->forgetInstance(Webpack::class);
-        $webpack = $this->app->make(Webpack::class);
-        $this->assertEquals('http://cdn.test/app/b', $webpack->url('a'));
-
-        config(['app.asset.env' => 'development']);
-        $this->assertEquals('http://localhost:8080/a', $webpack->url('a'));
-    }
-}
diff --git a/tools/HtmlWebpackEnhancementPlugin.ts b/tools/HtmlWebpackEnhancementPlugin.ts
new file mode 100644
index 00000000..320f8301
--- /dev/null
+++ b/tools/HtmlWebpackEnhancementPlugin.ts
@@ -0,0 +1,82 @@
+import { promises as fs } from 'fs'
+import * as path from 'path'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import type { Compiler } from 'webpack'
+import type { Options } from 'html-webpack-plugin'
+
+class HtmlWebpackEnhancementPlugin {
+  apply(compiler: Compiler) {
+    compiler.hooks.compilation.tap(
+      'HtmlWebpackEnhancementPlugin',
+      (compilation) => {
+        const hooks = HtmlWebpackPlugin.getHooks(compilation)
+
+        hooks.beforeAssetTagGeneration.tap(
+          'HtmlWebpackEnhancementPlugin',
+          (data) => {
+            // @ts-ignore
+            const options: Options = data.plugin.options
+            const entries = (options.templateParameters ?? []) as string[]
+            data.assets.js = data.assets.js.filter((name) =>
+              entries.some((entry) =>
+                new RegExp(`^${entry}\\.`).test(path.basename(name, 'js')),
+              ),
+            )
+            data.assets.css = data.assets.css.filter((name) =>
+              entries.some((entry) =>
+                new RegExp(`^${entry}\\.`).test(path.basename(name, 'css')),
+              ),
+            )
+            return data
+          },
+        )
+
+        hooks.alterAssetTags.tap('HtmlWebpackEnhancementPlugin', (data) => {
+          data.assetTags.scripts = data.assetTags.scripts.map((tag) => {
+            tag.attributes.crossorigin = 'anonymous'
+            return tag
+          })
+          data.assetTags.styles = data.assetTags.styles.map((tag) => {
+            tag.attributes.crossorigin = 'anonymous'
+            return tag
+          })
+
+          return data
+        })
+
+        hooks.afterTemplateExecution.tap(
+          'HtmlWebpackEnhancementPlugin',
+          (data) => {
+            if (
+              compilation.compiler.options.mode === 'production' &&
+              data.headTags.length > 0
+            ) {
+              data.bodyTags = data.headTags
+              data.headTags = []
+            }
+
+            return data
+          },
+        )
+
+        hooks.beforeEmit.tapPromise(
+          'HtmlWebpackEnhancementPlugin',
+          async (data) => {
+            const filePath = path.resolve(
+              process.cwd(),
+              'resources',
+              'views',
+              'assets',
+              data.outputName,
+            )
+            await fs.writeFile(filePath, data.html)
+
+            return data
+          },
+        )
+      },
+    )
+  }
+}
+
+export default HtmlWebpackEnhancementPlugin
diff --git a/tools/build.ps1 b/tools/build.ps1
index 83ec8684..97d0fb8c 100644
--- a/tools/build.ps1
+++ b/tools/build.ps1
@@ -21,10 +21,3 @@ if ($Simple) {
 Copy-Item -Path ./resources/assets/src/images/bg.webp -Destination ./public/app
 Copy-Item -Path ./resources/assets/src/images/favicon.ico -Destination ./public/app
 Write-Host 'Static files copied.' -ForegroundColor Green
-
-# Write commit ID
-$commit = git log --pretty=%H -1
-$manifest = Get-Content ./public/app/manifest.json | ConvertFrom-Json
-$manifest | Add-Member -MemberType NoteProperty -Name commit -Value $commit.Trim()
-ConvertTo-Json $manifest | Set-Content ./public/app/manifest.json
-Write-Host 'Saved commit ID.' -ForegroundColor Green
diff --git a/webpack.config.ts b/webpack.config.ts
index b24ebf08..c1d189e9 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -2,16 +2,20 @@ import * as path from 'path'
 import * as webpack from 'webpack'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import TerserJSPlugin from 'terser-webpack-plugin'
-import ManifestPlugin from 'webpack-manifest-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import HtmlWebpackEnhancementPlugin from './tools/HtmlWebpackEnhancementPlugin'
 
 const devMode = !process.argv.includes('-p')
 
+const htmlPublicPath = devMode ? '//localhost:8080/' : '{{ cdn_base }}/app/'
+
 const config: webpack.Configuration = {
   mode: devMode ? 'development' : 'production',
   entry: {
     app: ['react-hot-loader/patch', '@/index.tsx'],
     style: ['@/styles/common.css'],
     home: '@/scripts/homePage.ts',
+    'home-css': '@/styles/home.css',
     spectre: [
       'spectre.css/dist/spectre.min.css',
       '@/fonts/minecraft.css',
@@ -64,6 +68,41 @@ const config: webpack.Configuration = {
       filename: devMode ? '[name].css' : '[name].[contenthash:7].css',
       chunkFilename: devMode ? '[id].css' : '[id].[contenthash:7].css',
     }),
+    new HtmlWebpackPlugin({
+      templateContent: devMode
+        ? ''
+        : `
+<script src="https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js" integrity="sha256-Ag0WTc8xFszCJo1qbkTKp3wBMdjpjogsZDAhnSge744=" crossorigin></script>
+<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js" integrity="sha256-k8tzaSH8ucPwbsHEO4Wk5szE9zERNVz3XQynfyT66O0=" crossorigin></script>`,
+      templateParameters: ['app'],
+      filename: 'app.twig',
+      publicPath: htmlPublicPath,
+    }),
+    new HtmlWebpackPlugin({
+      templateContent: '',
+      templateParameters: ['style'],
+      filename: 'style.twig',
+      publicPath: htmlPublicPath,
+    }),
+    new HtmlWebpackPlugin({
+      templateContent: '',
+      templateParameters: ['home'],
+      filename: 'home.twig',
+      publicPath: htmlPublicPath,
+    }),
+    new HtmlWebpackPlugin({
+      templateContent: '',
+      templateParameters: ['home-css'],
+      filename: 'home-css.twig',
+      publicPath: htmlPublicPath,
+    }),
+    new HtmlWebpackPlugin({
+      templateContent: '',
+      templateParameters: ['spectre'],
+      filename: 'spectre.twig',
+      publicPath: htmlPublicPath,
+    }),
+    new HtmlWebpackEnhancementPlugin(),
   ],
   resolve: {
     extensions: ['.js', '.ts', '.tsx', '.json'],
@@ -105,8 +144,6 @@ const config: webpack.Configuration = {
 if (devMode) {
   config.plugins!.push(new webpack.NamedModulesPlugin())
   config.plugins!.push(new webpack.HotModuleReplacementPlugin())
-} else {
-  config.plugins!.push(new ManifestPlugin())
 }
 
 export default config
diff --git a/yarn.lock b/yarn.lock
index 67620cac..f4e24fdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1063,6 +1063,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/html-minifier-terser@^5.0.0":
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
+  integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
+
 "@types/http-proxy-middleware@*":
   version "0.19.3"
   resolved "https://registry.npmjs.org/@types/http-proxy-middleware/-/http-proxy-middleware-0.19.3.tgz#b2eb96fbc0f9ac7250b5d9c4c53aade049497d03"
@@ -1282,6 +1287,11 @@
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
   integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ==
 
+"@types/tapable@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
+  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
+
 "@types/terser-webpack-plugin@^3.0.0":
   version "3.0.0"
   resolved "https://registry.npmjs.org/@types/terser-webpack-plugin/-/terser-webpack-plugin-3.0.0.tgz#8c5781922ce60611037b28186baf192e28780a03"
@@ -1320,13 +1330,6 @@
     "@types/serve-static" "*"
     "@types/webpack" "*"
 
-"@types/webpack-manifest-plugin@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/@types/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.0.tgz#1fc52fc795d165493ab957656a7aa9f5cb7c145e"
-  integrity sha512-6OROnT+O0nht7QAr1juVZLm5E8V92LU7EDLyoEVFDUdRE67lU9c9fpPjrVVN+QXPYeaBP7ZzbQI8A4LEUtv8rg==
-  dependencies:
-    "@types/webpack" "*"
-
 "@types/webpack-sources@*":
   version "0.1.5"
   resolved "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-0.1.5.tgz#be47c10f783d3d6efe1471ff7f042611bd464a92"
@@ -1348,6 +1351,18 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
+"@types/webpack@^4.41.8":
+  version "4.41.24"
+  resolved "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.24.tgz#75b664abe3d5bcfe54e64313ca3b43e498550422"
+  integrity sha512-1A0MXPwZiMOD3DPMuOKUKcpkdPo8Lq33UGggZ7xio6wJ/jV1dAu5cXDrOfGDnldUroPIRLsr/DT43/GqOA4RFQ==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
+
 "@types/yargs-parser@*":
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
@@ -2349,6 +2364,14 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camel-case@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/camel-case/-/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
+  integrity sha512-7fa2WcG4fYFkclIvEmxBbTvmibwF2/agfEBc6q3lOpVu0A13ltLsA+Hr/8Hp6kp5f+G7hKi6t8lys6XxP+1K6Q==
+  dependencies:
+    pascal-case "^3.1.1"
+    tslib "^1.10.0"
+
 camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -2516,6 +2539,13 @@ classnames@^2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+clean-css@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
+  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
+  dependencies:
+    source-map "~0.6.0"
+
 cli-spinners@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.3.0.tgz#0632239a4b5aa4c958610142c34bb7a651fc8df5"
@@ -2629,6 +2659,11 @@ commander@^2.20.0:
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -2912,6 +2947,16 @@ css-select-base-adapter@^0.1.1:
   resolved "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
   integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
 
+css-select@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
+  dependencies:
+    boolbase "~1.0.0"
+    css-what "2.1"
+    domutils "1.5.1"
+    nth-check "~1.0.1"
+
 css-select@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz#ab4386cec9e1f668855564b17c3733b43b2a5ede"
@@ -2943,7 +2988,7 @@ css-unit-converter@^1.1.1:
   resolved "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
   integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
 
-css-what@^2.1.2:
+css-what@2.1, css-what@^2.1.2:
   version "2.1.3"
   resolved "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
@@ -3316,6 +3361,13 @@ dom-accessibility-api@^0.5.1:
   resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
   integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
 
+dom-converter@^0.2:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
+  dependencies:
+    utila "~0.4"
+
 dom-serializer@0:
   version "0.2.1"
   resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
@@ -3334,7 +3386,7 @@ domain-browser@^1.1.1:
   resolved "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
   integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
@@ -3351,7 +3403,22 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domutils@^1.7.0:
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
+domutils@1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
   integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
@@ -3359,6 +3426,14 @@ domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+dot-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
+  integrity sha512-7hwEmg6RiSQfm/GwPL4AAWXKy3YNNZA3oFv2Pdiey0mwkRCPZ9x6SZbkLcn8Ma5PYeVokzoD4Twv2n7LKp5WeA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+
 dot-prop@^4.1.1:
   version "4.2.0"
   resolved "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -3481,6 +3556,11 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^3.2.1"
 
+entities@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
 entities@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
@@ -4108,15 +4188,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-minipass@^1.2.5:
   version "1.2.7"
   resolved "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
@@ -4333,10 +4404,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz#6f0952605d0140c1cfdb138ed005775b92d67b02"
   integrity sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==
 
-graceful-fs@^4.1.6:
-  version "4.1.15"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
-
 graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
@@ -4438,6 +4505,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@@ -4513,6 +4585,46 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-minifier-terser@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
+  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
+  dependencies:
+    camel-case "^4.1.1"
+    clean-css "^4.2.3"
+    commander "^4.1.1"
+    he "^1.2.0"
+    param-case "^3.0.3"
+    relateurl "^0.2.7"
+    terser "^4.6.3"
+
+html-webpack-plugin@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
+  integrity sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==
+  dependencies:
+    "@types/html-minifier-terser" "^5.0.0"
+    "@types/tapable" "^1.0.5"
+    "@types/webpack" "^4.41.8"
+    html-minifier-terser "^5.0.1"
+    loader-utils "^1.2.3"
+    lodash "^4.17.15"
+    pretty-error "^2.1.1"
+    tapable "^1.1.3"
+    util.promisify "1.0.0"
+
+htmlparser2@^3.3.0:
+  version "3.10.1"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -5695,13 +5807,6 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
-jsonfile@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -5844,16 +5949,16 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5":
-  version "4.17.11"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
-
 lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.20:
+  version "4.17.20"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
 log-symbols@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -5872,6 +5977,13 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lower-case@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
+  integrity sha512-LiWgfDLLb1dwbFQZsSglpRj+1ctGnayXz3Uv0/WO8n558JycT5fg6zkNcnW0G68Nn0aEldTFeEfmjCfmqry/rQ==
+  dependencies:
+    tslib "^1.10.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -6286,6 +6398,14 @@ nice-try@^1.0.4:
   resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+no-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
+  integrity sha512-ehY/mVQCf9BL0gKfsJBvFJen+1V//U+0HQMPrWct40ixE4jnv0bfvxDbWtAHL9EcaPEOJHVVYKoQn1TlZUB8Tw==
+  dependencies:
+    lower-case "^2.0.1"
+    tslib "^1.10.0"
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -6456,7 +6576,7 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nth-check@^1.0.2:
+nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
   integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
@@ -6524,16 +6644,6 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.entries@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
-  integrity sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.12.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -6756,6 +6866,14 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
+param-case@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/param-case/-/param-case-3.0.3.tgz#4be41f8399eff621c56eebb829a5e451d9801238"
+  integrity sha512-VWBVyimc1+QrzappRs7waeN2YmoZFCGXWASRYX1/rGHtXqEcrGEIDm+jqIwFa2fRXNgQEwrxaYuIrX0WcAguTA==
+  dependencies:
+    dot-case "^3.0.3"
+    tslib "^1.10.0"
+
 parent-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.0.tgz#df250bdc5391f4a085fb589dad761f5ad6b865b5"
@@ -6807,6 +6925,14 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
+pascal-case@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz#5ac1975133ed619281e88920973d2cd1f279de5f"
+  integrity sha512-XIeHKqIrsquVTQL2crjq3NfJUxmdLasn3TYOU0VBM+UX2a6ztAWBlJQBePLGY7VHW8+2dRadeIPK5+KImwTxQA==
+  dependencies:
+    no-case "^3.0.3"
+    tslib "^1.10.0"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -7364,6 +7490,14 @@ prettier@^2.0.5:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
   integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
+pretty-error@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
+  dependencies:
+    lodash "^4.17.20"
+    renderkid "^2.0.4"
+
 pretty-format@^22.4.3:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.4.3.tgz#f873d780839a9c02e9664c8a082e9ee79eaac16f"
@@ -7710,6 +7844,15 @@ readable-stream@^3.0.6:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^3.1.1:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -7769,11 +7912,27 @@ regexpp@^3.1.0:
   resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
   integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
+relateurl@^0.2.7:
+  version "0.2.7"
+  resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
   integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
+renderkid@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/renderkid/-/renderkid-2.0.4.tgz#d325e532afb28d3f8796ffee306be8ffd6fc864c"
+  integrity sha512-K2eXrSOJdq+HuKzlcjOlGoOarUu5SDguDEhE7+Ah4zuOWL40j8A/oHvLlLob9PSTNvVnBd+/q0Er1QfpEuem5g==
+  dependencies:
+    css-select "^1.1.0"
+    dom-converter "^0.2"
+    htmlparser2 "^3.3.0"
+    lodash "^4.17.20"
+    strip-ansi "^3.0.0"
+
 repeat-element@^1.1.2:
   version "1.1.3"
   resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
@@ -8388,7 +8547,7 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -8828,7 +8987,7 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-terser@^4.6.13:
+terser@^4.6.13, terser@^4.6.3:
   version "4.8.0"
   resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
   integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
@@ -9007,6 +9166,11 @@ ts-node@^8.10.2:
     source-map-support "^0.5.17"
     yn "3.1.1"
 
+tslib@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@@ -9129,11 +9293,6 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
-universalify@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
-  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -9209,7 +9368,7 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-util.promisify@~1.0.0:
+util.promisify@1.0.0, util.promisify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
   dependencies:
@@ -9230,6 +9389,11 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
+utila@~0.4:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -9432,16 +9596,6 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-manifest-plugin@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
-  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
-  dependencies:
-    fs-extra "^7.0.0"
-    lodash ">=3.5 <5"
-    object.entries "^1.1.0"
-    tapable "^1.0.0"
-
 webpack-sources@^1.1.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"