diff --git a/package.json b/package.json
index 6bd8586..defdff0 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"start": "webpack serve --mode development",
"prebuild": "npm-run-all -p fetch-static create-sitemap",
"build": "webpack --mode production",
+ "postbuild": "node scripts/create-404.mjs",
"serve": "serve build",
"fetch-static": "node scripts/fetch-static.mjs",
"create-sitemap": "node scripts/create-sitemap.mjs"
diff --git a/public/index.js b/public/index.js
index 9ccca3e..86c2849 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,4 +1,4 @@
-module.exports = pages => `
+module.exports = ({ path, scripts, data }) => `
@@ -14,60 +14,40 @@ module.exports = pages => `
Client-side Rendering
+
+ ${scripts.map(({ name, source }) => ``).join('\n')}
diff --git a/public/serve.json b/public/serve.json
deleted file mode 100644
index e3cb182..0000000
--- a/public/serve.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "rewrites": [
- { "source": "/*", "destination": "/index.html" }
- ]
-}
\ No newline at end of file
diff --git a/scripts/create-404.mjs b/scripts/create-404.mjs
new file mode 100644
index 0000000..cad3211
--- /dev/null
+++ b/scripts/create-404.mjs
@@ -0,0 +1,3 @@
+import { copyFileSync } from 'fs'
+
+copyFileSync('build/index.html', 'build/404.html')
diff --git a/webpack.config.js b/webpack.config.js
index 5e2ce8c..e105208 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,7 +18,6 @@ module.exports = (_, { mode }) => {
port: 3000,
devMiddleware: { stats: 'errors-warnings' }
},
- cache: { type: 'filesystem' },
devtool: production ? 'source-map' : 'inline-source-map',
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
@@ -91,22 +90,25 @@ module.exports = (_, { mode }) => {
...(production ? [] : [new ReactRefreshPlugin()]),
...(production ? [] : [new ForkTsCheckerPlugin()]),
new ESLintPlugin(),
- new HtmlPlugin({
- scriptLoading: 'module',
- templateContent: ({ compilation }) => {
- const assets = compilation.getAssets().map(({ name }) => name)
+ ...pagesManifest.map(
+ ({ chunk, path, data }) =>
+ new HtmlPlugin({
+ filename: `${path.slice(1).replace(':', '') || 'index'}.html`,
+ inject: false,
+ templateContent: ({ htmlWebpackPlugin, compilation }) => {
+ const assets = compilation.getAssets()
+ const mainAssets = htmlWebpackPlugin.files.js.map(file => decodeURIComponent(file).slice(1))
+ const scripts = [
+ ...assets.filter(({ name }) => mainAssets.includes(name)),
+ ...assets.filter(({ name }) => new RegExp(`[/.]${chunk}\\.(.+)\\.js$`).test(name))
+ ].map(({ name, source }) => ({ name, source: source._children[0]._value }))
- const pages = pagesManifest.map(({ chunk, path, data }) => {
- const scripts = assets.filter(name => new RegExp(`[/.]${chunk}\\.(.+)\\.js$`).test(name))
+ if (data && !Array.isArray(data)) data = [data]
- if (data && !Array.isArray(data)) data = [data]
-
- return { path, scripts, data }
+ return htmlTemplate({ path, scripts, data })
+ }
})
-
- return htmlTemplate(pages)
- }
- }),
+ ),
new CopyPlugin({
patterns: [
{