What has been done?
- I have created functional component and exported as "CustomButton" in index.js
What is needed?
- I need to embed such multiple component to index.html file and use it.
What is the problem?
I have used react project so it was working well but as I need to use the same as web page, I needed create build to support in browsers,
I followed all steps to create build and use bundle file into web page. but when I use it as ReactDOM.render(
<CustomButton />,root reference) it gives and error of it is not defined.
I am not sure how to use it after creating bundle.
Example code
index.html:
<!DOCTYPE html />
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
<script src="require.js"> </script>
<script>var exports = {"__esModule": true};</script>
<script src="index.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
ReactDOM.render(<CustomButton />, document.getElementById('root'));
</script>
</body>
</html>WebPackConfig:
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: "./index.js",
plugins: [new CleanWebpackPlugin()],
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
options: {
interpolate: true,
esModule: true
}
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|config\.js$|manifest\.json$)/,
loader: "babel-loader",
query: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-transform-react-jsx"]
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|svg|gif)$/,
exclude: /launcher-icon/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'assets/img/'
}
}
]
},
{
test: /(\.jsonx$)/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].json',
outputPath: ''
}
}
]
},
{
test: /\.(dust)$/,
use: [{
loader: 'dust-loader-complete',
options: {
preserveWhitespace: true
}
}]
},
{
test: /\.(mp3|mp4)$/,
use: [
//'file-loader'
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'assets/snd/'
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[hash].[ext]',
outputPath: 'assets/fonts/'
}
}
]
}
]
},
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: "umd",
library: "",
globalObject: 'this'
}
};Let me know if more information needed. Thanks in advance