Документация по Webpack

---

1.Проблемы, если его не использовать

Существуют проблемы с управлением проектами JavaScript, если мы отдельно подключаем все библиотеки:

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

---

2.Установка Webpack в проект

При условии, что Node.js установлена

1. Создание файла package.json (документация)

   npm init

2. Установка webpack и webpack-cli (--save-dev - для development, --save - для production)

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

---

3.Первое использование

Проект version_1

Описание:

В файле src/index.ts подключена библиотека lodash*, этот файл собирается в базовой сборке webpack в файл dist/main.js

*lodash предварительно установлена через npm

---

4.Конфигурация и скрипты

Проект version_2

Описание:

Добавление файла webpack.config.js в проект и использование его как

webpack --config webpack.config.js

Добавление скрипта npm для быстрого запуска сборки (production)

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack --config webpack.config.js"
}

Для дальнейшего использования в cmd

npm run build

Чтобы использовать framework и/или другие языки, необходимо установить его в package.json и установить loader для него

---

5.Дополнительные ресурсы

Проект version_4

Описание:

Для сборки CSS / SCSS / SASS и других дополнительных ресурсов, необходимо использовать модули для их обработки

В rules прописываются правила, по которым обрабатывается содержимое. Далее идёт массив объектов с целевым раcширением файла (.scss и.т.д.) - test и использование различных загрузчиков - use

module: {
    rules: [
        {
            test: /\.s[ac]ss$/i,
            use: [
                'style.scss-loader',
                'css-loader',
                'sass-loader'
            ],
        },
    ]
}

Также для картинок/шрифтов, можно использовать тип исходников / ресурсов - type

{
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
}

---

6.Плагины

Для дополнительной обработки могут также применяться плагины, подключаются также в модуле

plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ]