1. Webpack

Webpack — это мощный инструмент для сборки модулей JavaScript. Он позволяет собирать файлы JavaScript (и их зависимости) в один или несколько бандлов.

Основные концепции

• Модули: Все файлы в вашем проекте являются модулями (JavaScript, CSS, изображения и т.д.).
• Энтри-поинт (Entry): Основной файл или файлы, с которых начинается сборка проекта.
• Выход (Output): Место, куда Webpack записывает собранные файлы.
• Загрузчики (Loaders): Трансформируют файлы модулей (например, Babel-loader для JavaScript или css-loader для CSS).
• Плагины (Plugins): Расширяют функциональность Webpack.

Пример конфигурации Webpack

• Установка Webpack:

  npm install --save-dev webpack webpack-cli
  
  

• Файл конфигурации (webpack.config.js):

  const path = require('path');
  
  module.exports = {
    entry: './src/index.js', // Точка входа
    output: {
      filename: 'bundle.js', // Имя выходного файла
      path: path.resolve(__dirname, 'dist') // Папка для выходного файла
    },
    module: {
      rules: [
        {
          test: /\\\\.js$/, // Регулярное выражение для поиска файлов
          exclude: /node_modules/, // Исключить папку node_modules
          use: {
            loader: 'babel-loader', // Использовать Babel-loader для трансформации JS
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html' // Шаблон HTML файла
      })
    ],
    mode: 'development' // Режим сборки
  };
  
  

• Запуск Webpack:

  npx webpack --config webpack.config.js
  
  

2. npm

npm (Node Package Manager) — это пакетный менеджер для JavaScript, который позволяет управлять зависимостями и скриптами проекта.

Основные команды npm

• Инициализация проекта:

  npm init
  
  

• Установка пакета:

  npm install package-name
  
  

• Установка пакета как dev-зависимость:

  npm install package-name --save-dev
  
  

• Удаление пакета:

  npm uninstall package-name
  
  

• Запуск скриптов:

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

  npm run start
  npm run build