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: [ {