54 lines
2.9 KiB
Markdown
54 lines
2.9 KiB
Markdown
---
|
||
title: Initializing the React Project with Webpack
|
||
localeTitle: Инициализация проекта React с помощью Webpack
|
||
---
|
||
Первое, что нужно сделать, это открыть нашу терминальную / командную строку. Нам нужно установить Webpack и Webpack Dev Server глобально.
|
||
|
||
* [Справка: Подробнее об установке модулей узлов в глобальном масштабе](https://docs.npmjs.com/getting-started/installing-npm-packages-globally)
|
||
|
||
npm установить webpack webpack-dev-server -g
|
||
|
||
|
||
Установка этих модулей во всем мире означает, что мы можем ссылаться на использование их соответствующих интерфейсов командной строки в терминале. Установка Webpack позволяет нам запускать `webpack` с терминала для выполнения сценария Webpack. Установка Webpack Dev Server позволяет нам запускать сервер localhost с использованием нашей конфигурации Webpack. Это станет понятным чуть позже.
|
||
|
||
В своем каталоге выбора создайте новый каталог, например, `react-webpack-example` , и замените в него каталог:
|
||
```
|
||
mkdir react-webpack-example && cd $_
|
||
```
|
||
|
||
Теперь, когда мы находимся в нашем новом каталоге, нам нужно создать наш файл Webpack, который будет жить в корне. Это файл конфигурации, и поэтому мы `webpack.config.js` его `webpack.config.js` .
|
||
```
|
||
touch webpack.config.js
|
||
```
|
||
|
||
Теперь мы можем продолжить и [инициализировать проект npm,](https://docs.npmjs.com/cli/init) используя следующую команду:
|
||
```
|
||
npm init
|
||
```
|
||
|
||
Мы можем идти вперед и нажимать клавишу ввода, чтобы просмотреть варианты, представленные нам в терминале.
|
||
|
||
Команда `npm init` создаст файл `package.json` , который будет содержать важные данные о нашем проекте.
|
||
|
||
До сих пор это то, на что должно выглядеть наше дерево:
|
||
```
|
||
.
|
||
├── package.json
|
||
└── webpack.config.js
|
||
```
|
||
|
||
Если вы откроете файл `package.json` , вы увидите следующее:
|
||
```
|
||
{
|
||
"name": "react-webpack-example",
|
||
"version": "1.0.0",
|
||
"description": "",
|
||
"main": "webpack.config.js",
|
||
"scripts": {
|
||
"test": "echo \"Error: no test specified\" && exit 1"
|
||
},
|
||
"author": "",
|
||
"license": "ISC"
|
||
}
|
||
|
||
``` |