webpack.config.js
const path = require("path"); const { DefinePlugin } = require("webpack"); const dotenv = require("dotenv"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.join(__dirname, "/build"), filename: "index.js", }, plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), new DefinePlugin({ "process.env": JSON.stringify(dotenv.config().parsed), }), ], devServer: { historyApiFallback: true, }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env", "@babel/preset-react"], }, }, }, ], }, };Error
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsO utputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } For typos: please correct them.arriba está el error y el código que he escrito.
Y estas son las dependencias que he añadido.
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --save-dev npm install react-router-domCompruebe público> index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ABC</title> </head> <body> <div id ="root"> </div> </body> </html>Comprobar app.js
import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import CoursePage from "./pages/Course"; import Home from "./pages/Home"; import StudentPage from "./pages/Student"; const App = () => { return ( <div> <Router> <Routes> <Route path="/student" element={<StudentPage />} /> <Route path="/course" element={<CoursePage />} /> <Route path="/" element={<Home />} /> </Routes> </Router> </div> ); }; export default App;Comprobar index.js
import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root"));Compare document.getElemantbyId ("root"), root ya está definido en index.html, finalmente verifique el archivo package.json
"scripts": { "start": "webpack-dev-server --mode development --open --hot --port 3000", "build": "webpack --mode production"