Showing react app in my HTML Javascript app

49 views Asked by At

I have a react app and I have generated a bundle.min.js by creating webapack.config.js which looks like the following:

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob');

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/main.*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

I copied the bundle.min.js from the dist\build\static\js folder and included it in the script tag inside my HTML code index.html as shown below:

<html>
  <head></head>
  <body>
    <h1>Bundle Testing</h1>
    <p>
      Here it comes:
    </p>
    <script src="bundle.min.js"/>
  </body>
</html>

But it doesn't show my app. How should I render my app content inside this HTML code? I'm sure I'm missing something.

0

There are 0 answers