1. React
  2. Webpack

Webpack

Установка

Для работы с webpack сначала надо установить Node.JS.

Затем надо создать директорию, в которой будет проект webpack, и запустить команду ниже.

npm init -y
npm install -D webpack webpack-cli

# или установка указанной версии
npm install webpack@<version>

Команда npm init в текущей папке создаёт файл package.json, в котором указаны настройки текущего проекта. Флаг -y (сокращенно от «yes») означает, что надо указать все значения файла package.json по умолчанию.

Настройка

После установки webpack надо создать три файла:

  • webpack.config.js
  • dist/index.html
  • src/index.js

В webpack.config.js надо заполнить следующие данные:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development', // на боевом сайте указать 'production'
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

В src/index.js:

// src/index.js

function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

И в index.html добавить следующий код:

<!-- dist/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название страницы</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

Также надо установить lodash, которая позволяет выполнять дополнительные функции.

npm install --save lodash

И запустить команду, которая сгенерирует файл «main.js» из «src/index.js» (настройки указаны в файле «webpack.config.js»).

npx webpack