Webpack - это сборщик. Компоновщик объединяет ваш код и его зависимости и объединяет их в файл. Этот файл проще развернуть.

Чтобы полностью понять этот пост, вы должны немного разбираться в javascript, реагировать / учиться реагировать. Общий обзор должен подойти.

Установите React и React dom

npm install react

Установите webpack, webpack-dev-server и webpack-cli

npm i --save-dev webpack webpack-dev-server webpack-cli

Установите @ babel / core, babel-loader, @ babel / preset-env, @ babel / preset-react, html-webpack-plugin. html-webpack-plugin - это плагин для веб-пакетов, который упрощает создание файлов HTML, обслуживающих пакеты веб-пакетов.

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

Создайте файл webpack.config.js в корневом каталоге для настройки webpack.

В webpack.config.js требуется установить модуль пути и установленный html-webpack-plugin.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

Укажите запись для вашего проекта в webpack.config.js

module.exports = {
  entry: './src/index.js'
}

В webpack.config.js укажите путь вывода

output: {
  path: path.join(__dirname, '/dist'),
  filename: 'bundlefile.js'
}

На данный момент файл выглядит так

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
}

Укажите тестовые файлы и файлы, которые нужно исключить.

module: {
  rules: [
    {
       test: /\.js$/,
       exclude: /node_modules/,
    }
  ]
},

Знак $ за сценарием тестовых файлов представляет собой символ регулярного выражения для конца строки или конца строки.

Создайте каталог src и создайте файлы index.js и index.html внутри каталога src.

В файле index.html создайте html-файл шаблона и в его теле создайте div с идентификатором «App».

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Send it react</title>
  <meta name="viewport" content="width=device-width, initial-   scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <div id="App"></div>
</body>
</html>

В файле index.js импортируйте react и react-dom, а также компонент для рендеринга. В нашем случае App. Index.js - это точка входа в проект. React DOM отображает компоненты в DOM, поэтому в приведенном ниже коде отображается компонент «App». Если приложение является компонентом с отслеживанием состояния, оно возвращает ссылку на компонент. Если это компонент без состояния, он возвращает null.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './js/components/App.js'

ReactDOM.render(<App/> , document.getElementById('app'))

Укажите загрузчик как babel-loader в файле webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
]
},

Добавьте все необходимые плагины для веб-пакетов. На этом этапе нужен плагин html-webpack-plugin для объединения созданного нами файла index.html.

plugins: [
  new HtmlWebpackPlugin({
  template: './src/index.html'
  })
]

Итак, весь файл webpack.config.js выглядит так:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundlefile.js'
  },
  module: {
    rules: [
      {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader'
         }
      }
   ]
  },
  plugins: [
    new HtmlWebpackPlugin({
       template: './src/index.html'
    })
  ]
}

Настройте приложение для использования babel, создав файл .babelrc в корневом каталоге проекта.

Файл .babelrc - это объект. В нем настройте предустановки для работы в зависимости от среды приложения (тестирование, разработка, производство).

{
  "presets": [
    "@babel/preset-env",
    "@babel/react"
  ]
}

Создайте App.js в src / js / components.

import React from 'react'
const App = () => {
  return(
     <div>
        <h1>Hello React</h1>
     </div>
   )
}
export default App;

В package.json напишите стартовый скрипт. в моем случае так выглядит мой скрипт в package.json:

"dev": "webpack-dev-server --mode development --open",

Если вас устраивает старт, вы тоже можете его использовать, здесь нет никаких правил.

"start": "webpack-dev-server --mode development --open",

Чтобы запустить проект, в зависимости от имени, которое вы использовали в сценарии, запустите приложение.

npm run dev

or

npm run start