Настройка ReactJs и Webpack из SCRATCH

В этой статье мы поймем, как настроить REACT с помощью WEBPACK, а не с помощью CRA.

Я предполагаю, что у нас есть базовое представление о том, что такое webpack и, конечно же, ReactJs.

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

Давай начнем! Если вы умеете писать код, это будет здорово.

1. Создайте каталог / папку и войдите внутрь папки. (Я буду использовать свой терминал для создания каталога)

mkdir <FOLDER_NAME> && cd <FOLDER_NAME>

2. В терминале напишем (Открывайте терминал, если нет).

npm init -y

Это создаст package.json в папке нашего проекта.

(нравится)

3. Теперь мы установим зависимости Webpack как dev-зависимости.

npm install webpack webpack-cli webpack-dev-server --save-dev

4. Теперь мы установим зависимости babel также как dev-зависимости.

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

Что делают эти зависимости?

• webpack: webpack - это сборщик модулей. Его основная цель - объединить файлы JavaScript для использования в браузере, но при этом он также может преобразовывать, объединять или упаковывать практически любой ресурс или актив.
• webpack-cli: если мы используем webpack v4 или новее, его необходимо установить .
• webpack-dev-server: используйте webpack с сервером разработки, который обеспечивает перезагрузку в реальном времени. Это следует использовать только для разработки.
• @ babel / core: это транспилятор JavaScript для преобразования современного JavaScript в готовую к работе версию, совместимую со всеми браузерами.
• babel-loader: этот пакет позволяет переносить файлы JavaScript с помощью Babel и webpack.
• @ babel / preset-env: это умная предустановка, которая позволяет вам использовать последнюю версию JavaScript без необходимости микроуправления тем, какие синтаксические преобразования необходимы вашей целевой среде.
• @ babel / preset-response: это специальный плагин для React, который преобразует JSX в простой JavaScript.

ПРИМЕЧАНИЕ. Мы используем флаг --save-dev, чтобы отделить наши зависимости, связанные с разработкой, и не включать их в производственный пакет.

5. Теперь давайте создадим файл конфигурации webpack, т.е. webpack.config.js в корневом каталоге (на том же уровне, что и package.json).

touch webpack.config.js

6. Давайте откроем наш любимый редактор кода (мой VScode). В webpack.config.js добавьте приведенный ниже код.

const path = require("path");
module.exports = {
   entry: "./index.js",
   output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
   },
};

• Здесь мы импортировали / потребовали path, чтобы получить путь к непосредственной папке.
• Затем мы экспортируем этот модуль (у него будут разные варианты, о которых мы узнаем позже в статье)
• entry - это точка входа в проект (мы создадим index.js позже), & inoutput, путь - это путь к пакету кода оптимизированной сборки (готового к производству), а имя файла - это имя выходного пакета. файл.

7. Теперь мы добавим module, который будет иметь массив правил, который будет использоваться для обработки файлов в зависимости от теста, которому он соответствует, и использует загрузчики для их обработки.

module.exports={
//previous code from above steps
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
           presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    },
  ],
},
}

8. Теперь давайте добавим plugin в файл конфигурации веб-пакета. Добавим html-webpack-plugin. Этот плагин сгенерирует для вас файл HTML5, который включает в себя все ваши пакеты веб-пакетов в теле с использованием тегов script. Но сначала нам нужно установить его и импортировать в webpack.config.js.

//in the terminal
npm install --save-dev html-webpack-plugin
//webpack.config.js
//import HtmlWebpackPlugin
const HtmlWebpackPlugin = require("html-webpack-plugin");
//we will add following code after the module option.
module.exports = {
//previous codes, entry, output, modules
  plugins: [
           new HtmlWebpackPlugin({ template: "./public/index.html"})
          ], 
}

(мы создадим index.html внутри общей папки позже).

9. Теперь мы создадим .babelrc в корневом каталоге и добавим в этот файл следующий код.

// in terminal
touch .babelrc
// in .babelrc file
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

10. Давайте создадим public,index.js в корневом каталоге проекта.

mkdir public && touch index.js

и index.html внутри папкиpublic.

cd public && touch index.html 

Теперь откройте index.html в редакторе кода, добавьте базовый HTML-код и создайте div с идентификатором root,, куда мы будем внедрять весь наш код React.

//  ./public/index.html
<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-    scale=1.0" />
      <title>React Webpack Scratch</title>
    </head>
    <body>
      <div id="root"></div>
    </body>
  </html>

11. Давайте установим React и ReactDom, но как зависимости, а не как dev-зависимости.

// in terminal
npm install --save react react-dom
//react & react-dom will be now available inside dependecies key in //package.json

12. Теперь мы добавим сценарии внутри ключа scripts в package.json для запуска и выполнения проекта и для создания сборки.

//package.json
"scripts":{
  "start": "webpack-dev-server --open",
  "build": "webpack",
}

• при запуске npm start запустит сервер разработки с использованием webpack-dev-server, а --open откроет локальный хост в браузере.
• при запуске npm build создаст файл пакета javascript в каталоге вывода, как указано в файле webpack.config.js.

13. Если вы помните, мы создали index.js на шаге №2. 10. Мы добавим код в index.js.

import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>hello</h1>, document.getElementById("root"));

14. Теперь давайте запустим сервер, запустив npm start в терминале.

Ура! мы успешно настроили webpack.

15. Создадим папку src, в которой мы будем хранить общие коды.

mkdir src && cd src && touch App.js

Не забудьте импортировать App.js в index.js.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./src/App";
ReactDOM.render(<App />, document.getElementById("root"));
//add code inside App.js
import React from "react";
const App = () => {
    return (
       <div className="App">
         <h1>Hello</h1>
       </div>
    );
};
export default App;

16. Если вы попытаетесь создать файл .css и импортировать его в файл js, он выдаст эту ошибку.

Чтобы решить эту проблему, нам нужно установить style-loader & css-loader как dev-зависимости для обработки стилей или файлов CSS, а также добавить rules в раздел module файла webpack.config.js fille.

// in terminal
npm install --save-dev style-loader css-loader
// in webpack.config.js inside rules array add below code
ruless:[
...previous rules,
{
  test: /\.css$/,
   use: ["style-loader",
         {
            loader: "css-loader",
            options: {
              modules: {
                auto: true,
                localIdentName: "[name]__[local]__[hash:base64:5]",
              },
           },
        },
     ],
  },
]

Теперь перезапустите сервер, используя npm start.

Ура! теперь мы можем стилизовать наше приложение.

Но есть еще одна проблема, мы по-прежнему не можем использовать изображения в нашем проекте.

Рекомендую попробовать самому.

Подсказка: для этого вам понадобится file-loader.

Окончательный webpack.config.js

Окончательный package.json

Спасибо за прочтение.

Если вам это нравится или вы сочли это полезным, могу я получить аплодисменты? 👏🏻👏🏻👏🏻👏🏻