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