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

Почему именно Webpack?

Если вы создаете большое клиентское приложение со многими статическими ассетами, такими как javascript, css, изображения, шрифты и т. Д., Тогда да, webpack даст вам большие преимущества.

Не было бы проблем, если бы у вас было меньше внешних статических файлов, как указано выше. Но в следующем случае все эти важные статические файлы будут медленно загружаться в нашем браузере.

Подсчитайте их, есть 18 файлов javascript и 8 файлов CSS.

Есть несколько больших проблем:

  1. Скорость и производительность

Когда наш браузер запрашивает такое количество скриптов, возникает узкое место в сети, что приводит к медленной загрузке. Это влияет на производительность нашего приложения.

2. Зависимости

Иногда нам нужно переопределить наш собственный CSS. Иногда я переопределяю классы начальной загрузки, и тогда мне приходилось вручную поддерживать порядок тегов ‹link›.

Есть одно решение

Просто поместите все в один огромный файл и загрузите его. Это легко сделать с помощью Webpack.

Установка веб-пакета

npm install --save-dev webpack

Просто установите Webpack для своего приложения с помощью npm. Нам просто нужно установить его как зависимость для разработки.

Создайте точку входа

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

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Вывод

Свойство output сообщает Webpack, где создавать пакеты, которые он создает, и как назвать эти файлы. По умолчанию для основного выходного файла используется ./dist/main.js, а для любого другого сгенерированного файла - папка ./dist.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Загрузчики

У загрузчиков есть два свойства в конфигурации вашего веб-пакета:

  1. Свойство test определяет, какой файл или файлы следует преобразовать.
  2. Свойство use указывает, какой загрузчик следует использовать для преобразования.

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

Режим

Установив для параметра режима значение development, production или none, вы можете включить встроенные оптимизации webpack, соответствующие каждой среде. Значение по умолчанию - производство.

module.exports = {
  mode: 'production'
};

веб-пакет для производства

Установите слияние webpack с помощью следующей команды:

npm install --save-dev webpack-merge

webpack.prod.js

 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });

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

Наконец, вы можете запустить npm run build, и тогда все готово.

Больше кода = больше файлов = меньше производительности и решение = webpack: D