בעיה בהתקנת ריאקט

קורס React
#1

ממש מסתבכת עם ההתקנה ולא מצליחה להתקדם
זה מה שנרשם לי ב cmd:

C:\Users\לוי\react-course>npx webpack-dev-server -d
npx: installed 392 in 41.516s
Cannot find module ‘webpack’
Require stack:

  • C:\Users\לוי\AppData\Roaming\npm-cache_npx\15460\node_modules\webpack-dev-server\bin\webpack-dev-server.js
#2

תנסי ללכת לפי הסדר הבא:

1.) צרי תיקיה חדשה.
2.) תפעילי בתוכה דרך ה-cmd את הפקודות הבאות:

- npm init -y
- npm install --save-dev react react-dom webpack webpack-cli@3.3.12 babel-cli @babel/core @babel/preset-react html-webpack-plugin clean-webpack-plugin webpack-dev-server babel-loader mini-css-extract-plugin css-loader node-sass sass-loader

צרי בתוך התיקיה פרויקט במבנה הבא:

styles/main.css
html/index.html
src/main.js
webpack.config.js

תעתיקי את הקוד הבא לתוך הקובץ webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
  entry: './src/main.js',
  mode: 'development',
  devServer: {
    overlay: true,
  },
  module: {
    rules: [      
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader, },
          'css-loader',
        ],
      },
      
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './html/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: true,
    }),
    new CleanWebpackPlugin(),
  ]
};

וזהו עכשיו רק נשאר לך להריץ את הפקודה הבאה מהתיקיה שבתוכה נמצא קובץ ה-webpack.config.js (במקרה הזה זו התיקיה הראשית אבל אפשר ליצור גם תיקיה משנית שבתוכה המבנה הנ"ל):

npx webpack-dev-server -d
לייק 1
#3

מעולה! ואני יכול רק להוסיף שאפשר למצוא כבר את התיקיות עם כל הקבצים בדיוק בפורמט שכתבת בתיקיית הדוגמאות של הקורס