Basically, I want to show my react app in a single script tag. I created a build file with web pack. I don't know how to interpret it. But it is not displaying anything when I load it into my html file. Chrome is showing the build file as a source but nothing is displayed on the browser I also tried to add some js functions in build file manually like:
document.getElementById('ex-wid').innerHTML = "TESTING"
It is displayed on the page correctly but other react components or images are not added to the div.
html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Widget App</title>
</head>
<body>
<div id='ex-wid' ></div>
<script src="./bundle.js"></script>
</body>
</html>Webpack config:
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|media)/*.?(js|css|png|woff|woff2|eot|ttf|svg)"
)
.map((f) => path.resolve(__dirname, f)),
},
output: {
filename: "build/static/js/bundle.js",
},
module: {
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /.(png|woff|woff2|eot|ttf|svg)$/,
use: ["url-loader?limit=100000"],
},
],
},
plugins: [new UglifyJsPlugin()],
};build file: https://file.io/e8QRWtx00GsB