<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>react</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

<body>
  <div id="app">
    <!-- for loader replace -->
    {{HTML}}
    </div>
</body>

</html>

webpack.config.js


const HtmlWebPackPlugin = require("html-webpack-plugin")

...
new HtmlWebPackPlugin({
  template: `!!@lsky/magic-loader!${path.resolve(
    __dirname,
    "../index.html"
  )}`,
  filename: path.resolve(__dirname, "../dist/index.html"),
})
...

entry.js

import React from "react"
import ReactDOM from "react-dom"
import { renderToString } from "react-dom/server"
import App from "./app"

if (typeof global.document !== "undefined") {
  ReactDOM.render(<App />, document.getElementById("app"))
}

// must be app
export const app = () => {
  const html = renderToString(<App></App>)
  return html
}

Attention

No chunk

No externals

FAQs

What is @lsky/magic-loader?

Is @lsky/magic-loader well maintained?

Package last updated on 10 Dec 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install