эта статья - первая часть базовой настройки веб-пакета для веб-приложений.
- Настройка конфигурации Webpack - часть I (вы здесь)
- Настройка конфигурации Webpack - часть II
Webpack - один из самых популярных (›35,7 тыс. Звезд на github в день написания этого) javascript и других пакетов ресурсов, доступных для веб-разработки. Написав очень небольшую конфигурацию, вы можете начать с базовой настройки разработки.
В этой статье я покажу быструю настройку базовых конфигураций для файлов js, ввода и вывода, а затем более продвинутые конфигурации в последующих статьях.
Давайте начнем.
базовая настройка перед началом работы:
- установить узел и npm (использовать nvm для управления версиями выделенных узлов, это всего лишь небольшой совет, не имеющий отношения к webpack)
- создайте рабочий каталог в вашем рабочем пространстве. я называю это
webpack-basics
- откройте терминал и измените рабочий каталог на выше
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
.
- установить 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. давайте создадим конфигурацию нашего веб-пакета.
- создайте файл с именем
webpack.config.js
в корневой папке. - скопируйте ниже в файл
здесь мы определяем две основные и наиболее важные конфигурации для файла webpack
а. запись: это начальный файл записи для вашего приложения. отсюда можно ссылаться на все остальные файлы.
б. output: здесь мы определяем имя для нашего создаваемого выходного файла в свойстве filename
и расположение каталога, в который будет отправлен этот файл, свойство path
.
мы также можем определить несколько именованных точек входа и создать для каждой отдельные файлы пакетов. это чаще всего используется для отделения нашего пакета приложений от пакета библиотек поставщика.
[name]
в выходном имени файла выше - это заполнитель, который заменяется именами входных ключей. в этом случае webpack выдаст два файла, app.bundle.js
и vendor.bundle.js
3. Теперь снова, если мы запустим команду npx webpack
через наш файл конфигурации, это должно привести к тому же результату
npx webpack --config webpack.config.js
мы не хотим каждый раз писать конфигурацию webpack в терминале. всегда полезно настроить для этого скрипты npm.
- создать сценарий сборки в
package.json
"scripts": {
"build": "webpack"
}
2. запуск сценария build
через npm должен привести к использованию нашей конфигурации веб-пакета и созданию bundle.js
npm run build
это была базовая настройка веб-пакета для начинающих. Я дополню эту статью еще парой с некоторыми расширенными конфигурациями, которые помогут вам в настройке реального проекта веб-разработки и сделают вашу жизнь намного счастливее.
‹Предыдущая | "следующий>"