Что такое Webpack, как им пользоваться? (Революционный)

Webpack — это мощный инструмент, позволяющий разработчикам создавать эффективные и оптимизированные веб-приложения. Это сборщик модулей, который преобразует различные типы ресурсов, таких как JavaScript, CSS и изображения, в формат, который может быть эффективно доставлен в браузер.

Вот несколько ключевых понятий, которые нужно понимать при работе с webpack:

Модули: Webpack рассматривает каждый файл в вашем приложении как модуль и позволяет вам импортировать и экспортировать эти модули для создания графа зависимостей. Это помогает с организацией кода и модульностью, а также позволяет легко повторно использовать код в разных частях вашего приложения.
Загрузчики: Webpack использует загрузчики для обработки различных типов ресурсов и преобразования их в нужный формат. Например, babel-loader позволяет транспилировать код JavaScript, а css-loader позволяет импортировать и связывать файлы CSS.
Плагины: плагины Webpack позволяют расширить функциональность сборщика и выполнять различные задачи, такие как минимизация кода, создание HTML-файла или определение глобальных констант.
Вход и выход: точка входа является отправной точкой вашего приложения и определяет, какие модули должны быть включены в пакет. Вывод указывает, где должны быть сохранены связанные файлы, и их имена.
Режимы разработки и производства: Webpack позволяет настраивать различные параметры для среды разработки и производства. Например, вы можете включить исходные карты и включить горячую перезагрузку для разработки, но минимизировать и оптимизировать свой код для производства.
Разделение кода: Webpack позволяет разделить код на разные части, которые затем можно динамически загружать по запросу. Это может сократить время первоначальной загрузки вашего приложения и уменьшить объем кода, который необходимо загрузить.

Итак, как мы это настроим?

Откройте редактор кода VS. Внутри него откройте терминал и введите:

npm init -y

это создаст файл package.json. Теперь нам нужно установить, webpack и webpack-cli.

2. Снова откройте терминал и введите:

npm install webpack webpack-cli --save-dev

3. Создайте папку с именем «src». Внутри него создайте файл с именем index.js.

4. В корне проекта создайте файл с именем webpack.config.jsВ файле скопируйте и вставьте следующее:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Отредактируйте имя файла, сделайте его «bundle.js». Это просто проясняет ситуацию.

5. Вернитесь к package.json. Замените это:

"test": "echo \"Error: no test specified\" && exit 1"

с этим :

"build": "webpack"

6. Вернитесь к терминалу и введите «npm run build», затем введите. Он создаст связанную версию вашего старого javascript в папке «dist». Внутри это не будет слишком захватывающим, но хорошая новость заключается в том, что если вы зашли так далеко, все работает. Теперь давайте подключим его к живому серверу.

Перейдите по этой ссылке: https://webpack.js.org/guides/development/#using-webpack-dev-server
Откройте терминал в VSCode, введите это и введите:

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

3. Затем введите это и введите:

 npm install --save-dev html-webpack-plugin

4. Теперь давайте отредактируем файл webpack.config.js. Измените это:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

к этому :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
        mode:'development',
  entry: './src/index.js',
  devServer: {
        static: {
          directory: path.resolve(__dirname, 'app'),
        }},
  plugins: [
        new HtmlWebpackPlugin({
                title: 'Development'
        })
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

5. Отредактируйте файл package.json следующим образом:

{
  "name": "webpack-udemy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

6. Снова откройте терминал, введите npm run dev и введите.

Это просто дополнительный помощник для настройки web-back. Не забудьте ознакомиться с документацией.

Что такое Webpack, как им пользоваться? (Революционный)

Вопросы по теме