Сборка модулей, Загрузчики, Плагины, 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
- наш связанный код jsindex.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.