эта статья - первая часть базовой настройки веб-пакета для веб-приложений.

Webpack - один из самых популярных (›35,7 тыс. Звезд на github в день написания этого) javascript и других пакетов ресурсов, доступных для веб-разработки. Написав очень небольшую конфигурацию, вы можете начать с базовой настройки разработки.

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

Давайте начнем.

базовая настройка перед началом работы:

  1. установить узел и npm (использовать nvm для управления версиями выделенных узлов, это всего лишь небольшой совет, не имеющий отношения к webpack)
  2. создайте рабочий каталог в вашем рабочем пространстве. я называю это webpack-basics
  3. откройте терминал и измените рабочий каталог на выше
cd webpack-basics

4. инициализировать файл узла package.json с параметрами по умолчанию.

npm init

5. создайте эти два файла

touch index.html app.js

6. скопируйте это в index.html

7. и это в app.js

8. откройте index.html в браузере, и вы должны увидеть загруженное изображение с image loaded div под ним.

9. Далее мы будем использовать webpack для обслуживания нашего связанного файла js.

Теперь мы установим веб-пакет и соберем наш app.js в папку dist. создайте две папки src и dist. переместить все текущие файлы в папку src.

  1. установить webpack локально и добавить в dev зависимости.
npm install --save-dev webpack

2. запустите npx webpack (работает с ≥ узлом 8.2) с нашим app.js в качестве записи и bundle.js в качестве вывода.

npx webpack src/app.js dist/bundle.js

webpack создаст файл bundle.js в папке dist.

3. обновите index.html ссылку на скрипт, чтобы использовать bundle.js

4. Снова откройте index.html в браузере, и вы увидите тот же результат.

Вместо предоставления entry и output в терминале для реальных проектов лучше использовать файл конфигурации webpack. давайте создадим конфигурацию нашего веб-пакета.

  1. создайте файл с именем webpack.config.js в корневой папке.
  2. скопируйте ниже в файл

здесь мы определяем две основные и наиболее важные конфигурации для файла webpack

а. запись: это начальный файл записи для вашего приложения. отсюда можно ссылаться на все остальные файлы.

б. output: здесь мы определяем имя для нашего создаваемого выходного файла в свойстве filename и расположение каталога, в который будет отправлен этот файл, свойство path.

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

[name] в выходном имени файла выше - это заполнитель, который заменяется именами входных ключей. в этом случае webpack выдаст два файла, app.bundle.js и vendor.bundle.js

3. Теперь снова, если мы запустим команду npx webpack через наш файл конфигурации, это должно привести к тому же результату

npx webpack --config webpack.config.js

мы не хотим каждый раз писать конфигурацию webpack в терминале. всегда полезно настроить для этого скрипты npm.

  1. создать сценарий сборки в package.json
"scripts": {
    "build": "webpack"
  }

2. запуск сценария build через npm должен привести к использованию нашей конфигурации веб-пакета и созданию bundle.js

npm run build

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

‹Предыдущая | "следующий>"