Сборка модулей, Загрузчики, Плагины, Babel

Webpack - это сборщик модулей для современных JavaScript-приложений. Операторы import и export стандартизированы в ES2015. Они пока не поддерживаются в браузерах, но webpack поддерживает их прямо из коробки. Но на самом деле это более мощный инструмент, который может помочь нам создать весь интерфейс.

Установка

Начнем с инициализации package.json с помощью команды npm init.

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

npm install --save-dev webpack

Webpack будет добавлен в devDependencies

Интерфейс командной строки (CLI)

Поскольку мы устанавливаем веб-пакет локально, мы должны запустить его через npm scripts

Затем попробуйте запустить его:

npm run start

Далее мы увидим, что вам нужно инициализировать конфигурацию:

No configuration file found and no output filename configured via CLI option. A configuration file could be named ‘webpack.config.js’ in the current directory. Use --help to display the CLI options.

Файл конфигурации инициализации

touch webpack.config.json

Для генерации файла index.html воспользуемся одним из самых популярных плагинов HtmlWebpackPlugin. Что такое плагины, мы рассмотрим позже в этой статье.

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

entry - основной файл приложения, включающий целые модули.

output - опция, содержащая путь к выходному каталогу и имя файла сборщика (по умолчанию переменная name равна main.js)

plugins - список плагинов веб-пакета с опциями.

Чтобы увидеть, как работает эта конфигурация, нам нужно создать два файла JS.

Самый простой модуль.

mkdir src
touch src/hello.js

Что будет импортировано и использовано в нашей точке входа:

touch src/index.js

Давайте создадим это с помощью webpack.

npm run start

Он создаст два файла в папке build.

  • main.js - наш связанный код js
  • index.html - html-документ с заголовком main.js и Webpack app.

Несколько точек входа

Если вам не нужен SPA, может пригодиться использование некоторых точек входа.

Вот результат:

  • index.js и about.js - объединенные точки входа.
  • index.html - html-документ с заголовком main.js и Index.
  • about.html - html-документ с заголовком about.js и About.

Сервер разработки Webpack

Используйте webpack-dev-server для локальной разработки, потому что он обеспечивает:

  • Запуск в памяти
  • Livereload
  • Замена горячего модуля (желательно с помощью React)
npm install --save-dev webpack-dev-server

Измените webpack на webpack-dev-server в команде запуска сценария npm.

npm run start

Проект работает по адресу http: // localhost: 8080 /

Погрузчики

Webpack позволяет использовать загрузчики для предварительной обработки файлов. Рассмотрим пример с добавлением загрузчиков SASS.

Установка компилятора и загрузчиков SASS.

npm install --save-dev node-sass style-loader css-loader sass-loader

test - регулярное выражение, для сопоставления которого мы обрабатываем файлы.

exclude - регулярное выражение, в котором мы указываем пути, которые нам не нужны для поиска файлов.

use - массив загрузчиков, которые будут применены к совпадающим файлам, они выполняются в обратном порядке.

  • sass-loader - компилятор SASS.
  • css-loader - интерпретирует @import и url() как import/require() и разрешает их.
  • style-loader - вставляет CSS в тег <script>.

Импортировать стили в точку входа:

import ‘./index.scss’

И запускаем webpack:

npm run build

Затем скомпилированный css будет включен в тег <script> в index.html

Сторонние библиотеки

npm install normalize.css

Для этого нам нужно добавить загрузчик в наш конфиг:

Импортировать библиотеку в точку входа:

import ‘normalize.css’

файловый загрузчик

Указывает webpack выдать требуемый объект в виде файла и вернуть его общедоступный URL.

npm install --save-dev file-loader

Плагины

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

Рассмотрим парочку самых популярных плагинов.

ExtractTextWebpackPlugin

Извлеките текст из пакета или пакетов в отдельный файл.

npm install --save-dev extract-text-webpack-plugin

Стили будут добавлены через main.css файл.

UglifyjsWebpackPlugin

Этот плагин позволяет вам минимизировать ваш JavaScript.

npm install --save-dev uglifyjs-webpack-plugin

С помощью этого модуля минифицированный JS будет включен в index.html

Вавилон

Babel - это компилятор JavaScript, который позволяет использовать новейшие функции ECMAScript до выпуска спецификации, а также использовать специальные и экспериментальные функции.

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Далее мы укажем, что babel-loader следует применять для файлов js и jsx.

В .babelrc мы укажем пресеты.

Производство и разработка

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

  • Условия по NODE_ENV переменной.
  • Отдельные конфиги.

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

“scripts”: { 
  “start”: “NODE_ENV=development webpack-dev-server”,
  “build”: “NODE_ENV=production webpack”
}

Например, вы можете написать условия, используя NODE_ENV

Если это приложение Rich-Client, эта конфигурация может вырасти таким образом до сотен строк кода, что сделает его недоступным для обслуживания. Поэтому лучше разделить на разные конфиги и просто импортировать общие параметры в виде модуля. Это возможно с опцией --config.

“scripts”: { 
  “start”: “webpack-dev-server --config webpack.dev.config.js”,
  “build”: “webpack --config webpack.prod.config.js”
}

Для объединения нескольких конфигов в один можно использовать webpack-merge.