I've followed several tutorials and none seem to work. I can configure webpack, babel, and some simple React components but they are not rendering on my localhost:3000. Any suggestions as to what I am doing wrong as there are no console logs or errors being thrown in terminal.
package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.11.0",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
.babelrc
{
"presets":
[
"@babel/preset-env",
"@babel/preset-react"
]
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist',),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
port: 3000,
contentBase: './dist',
hot: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
};
index.html
<!DOCTYPE html>
<html>
<head>
<title>My React Configuration Setup</title>
</head>
<body>
<div id="root"></div>
<!-- <script src="./dist/bundle.js"></script> -->
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
import Welcome from './App'
ReactDOM.render(<Welcome />, document.getElementById("root"));
module.hot.accept();
App.js
import React from 'react';
class Welcome extends React.Component {
render() {
return <h1>Hello World from React boilerplate</h1>;
}
}
export default Welcome
You are almost there.
bundle.js
using webpack
command from package.json
with below "scripts": {
"start": "webpack && webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
or
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
webpack.config.js
contentBase
property since your index.html
leaves at root (you could move it to dist
) devServer: {
port: 3000,
contentBase: './',
hot: true
},
bundle.js
import from index.html
: <div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
You could use create-react-app
to initialize an empty React project really fast
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.