[英]How do I set up webpack and babel when react app is not loading on localhost:3000
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.
我可以配置 webpack、babel 和一些简单的 React 组件,但它们不会在我的 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 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 .babelrc
{
"presets":
[
"@babel/preset-env",
"@babel/preset-react"
]
}
webpack.config.js 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 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索引.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应用程序.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 belowpackage.json
的webpack
命令构建bundle.js
,如下所示 "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
)webpack.config.js
contentBase
属性,因为您的index.html
位于根目录(您可以将其移动到dist
) devServer: {
port: 3000,
contentBase: './',
hot: true
},
bundle.js
import from index.html
:bundle.js
从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你可以使用
create-react-app
来非常快速地初始化一个空的 React 项目
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.