Я использую Webpack.
Я использовал его в create-response-app (CRA) через сценарии реакции, а также в других проектах, в которых настраиваются пользовательские конфигурации, прежде чем я прикоснусь к ним. Но я действительно не знаю, как это работает. Я смотрю на конфигурации, я понимаю некоторые идеи, лежащие в основе этого, но я никогда не писал конфигурацию Webpack и не пытался настроить свою собственную. Об этом и будет эта статья. Переход от отсутствия конфигурации к базовой функциональной настройке, которая объединяет HTML, CSS и Javascript.
Моя цель - раскрыть как можно большую часть этого процесса, чтобы Webpack был более доступным и дружелюбным для новых разработчиков.
Если вы работаете в React или другой библиотеке или фреймворке, для которого требуется процесс сборки, и вы хотите перестать полагаться на CRA или просто освоитесь с тем, что происходит дальше, мы сразу перейдем к созданию проекта. Поскольку я пишу это параллельно с проектом, я буду шаг за шагом объяснять, как я решаю каждую проблему и исследую загадки.
Не стесняйтесь следить за мной или использовать созданное мной репозиторий github. Если вы решите следовать по тексту, я специально использовал изображения определенных файлов, чтобы их нельзя было просто скопировать и вставить. Печатание этих вещей поможет вам научиться делать ошибки, видеть их и исправлять.
Прежде всего, изложите проект -
mkdir webpack-in-plain-english cd webpack-in-plain-english npm init -y mkdir src touch src/index.js mkdir src/components touch src/components/App.js npm i react react-dom
Теперь нам нужно несколько зависимостей разработчиков, чтобы все это работало. Для меня здесь все может запутаться, потому что многие их функциональные возможности начинают сливаться вместе. Нам нужен Webpack и его друзья, CLI и сервер разработки. Чтобы эта функция работала в браузере, нам необходимо транспилировать es6 и более поздние части нашего кода в стандарты es5. Webpack не транспилируется, это задача babel, загрузчика и предустановки. пакеты.
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
npm i -D babel-core babel-loader@7 babel-preset-env babel-preset-reactСам Webpack как пакет мы не будем касаться напрямую, он выполняет свою работу, а только через пакет webpack-cli, который мы установили, чтобы мы могли взаимодействовать и настраивать Webpack. Пакет Webpack dev server - отличный инструмент, который запускает наш процесс сборки и передает его браузеру. Что касается элементов Babel, они действительно заслуживают отдельного упоминания, и я, вероятно, напишу продолжение, чтобы больше узнать о том, как они работают, и о различных возможных конфигурациях.
Все, что мы только что установили, требует некоторой настройки.
При входе Webpack начинает сканирование файлов. По сути, он загружается в index.js, смотрит, из чего он состоит, и, если он видит, что index.js импортирует другие файлы, он обрабатывает их в соответствии с конфигурацией. она имеет.
Вывод позволяет нам определить, куда мы хотим поместить наш связанный файл js. В этом случае мы будем использовать модуль node.js ‘path’, чтобы определить наш путь. Второй ключ в объекте - это просто имя файла.
Модуль - это то место, где мы определяем, как обрабатывать каждый файл, с которым встречается Webpack. Массив ‘rules’ содержит объекты, которые определяют типы файлов и способы их обработки. Для каждого правила вы указываете, как должно выглядеть расширение, какие папки или файлы следует исключить и что использовать при подготовке этих файлов. В этом случае мы сообщаем Webpack, что ему необходимо искать расширения файлов .js, исключать все, что находятся в папке node_modules, и использовать babel-preset в качестве его загрузчика.
Конфигурация на данный момент готова. Нам нужно добавить несколько скриптов в наш package.json, чтобы мы действительно использовали эту конфигурацию и возможности Webpack.
Наш стартовый сценарий будет запускать сервер разработки Webpack, который обслуживает сборку нашего проекта, но не записывает ее на диск, а делает это в памяти. Мы также указали, что находимся в режиме разработки, мы хотим, чтобы браузер открывался при запуске этой команды, и что мы хотим, чтобы Webpack просматривал наши файлы и «горячая» перезагрузка им, когда есть изменения.
Примечание. Для тех, кто не знает, горячая перезагрузка означает способность кода автоматически перекомпилировать и перезагружать страницу в браузере при каждом изменении.
Команда сборки запишет проект на диск, и, поскольку мы используем флаг производства, он будет оптимизирован для использования конечным пользователем.
Поскольку мы определили наш загрузчик js как «babel-loader», нам нужно предоставить ему собственную конфигурацию. Использование предустановок позволяет легко указать babel, как работать с Javascript:
Поскольку речь идет о веб-пакете, а не о создании приложения, файлы index.js и App.js соответственно должны выглядеть следующим образом:
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './components/App'
ReactDOM.render(<App />, document.getElementById('root'))
App.js
import React, { Component } from 'react'
export class App extends Component {
render() {
return <p>Hi, I've been packed, and transpiled</p>
}
}
Марина Чернявская обратила мое внимание на то, что я пропустил файл index.html. Вот оно, спасибо Марине.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Webpack React</title> </head> <body> <div id="root"></div> </body> </html>
Достаточно просто, чтобы увидеть, работают ли наши скрипты и конфигурации. На этом этапе, если вы запустите npm start, вы должны быстро открыть всплывающее окно браузера и показать вам результаты того, что Webpack собрал вместе с этой конфигурацией. Давайте посмотрим, как Webpack обработал index.js (запись, которую мы определили).
Первая строка импортирует React, который находится в node_modules и подпадает под наше исключение, а Webpack знает, что с этим импортом ничего не нужно делать, то же самое с вторая линия. После импорта приложения Webpack продолжит сканирование этого файла. Добавление содержимого в пакет и постепенно через приложение, пока весь код не будет учтен в пакете.
Теперь у нас есть рабочая базовая конфигурация Webpack. Но подождите, это не касается стилей. Создайте styles.css в папке компонентов и импортируйте изменения тега «p» в App.js следующим образом:
import './styles.css'
Хорошо, теперь он сломан. Большой. Вся эта настройка, и я могу отображать только нестиллированный мусор!
Это подводит нас к самой важной части использования Webpack. Изучение загрузчиков и поиск способов решения проблем. Эту проблему легко решить, потому что с ней сталкивались многие люди. Простой поиск в Google приведет вас к пакету npm под названием «css-loader» или «style-loader». Вы увидите, что вам нужно установить их через npm, а затем изменить конфигурацию Webpack с помощью другого теста, чтобы включить файлы css и сообщить ему, как с ними бороться. Эти загрузчики позволили нам установить другое правило, на этот раз для css. Это не будет выводить файл css с вашими стилями, но добавьте их в свой Javascript следующим образом:
Быстро npm i style-loader css-loader и затем добавив правило в конфигурацию Webpack, которое выглядит следующим образом:
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
Теперь у вас есть возможность импортировать стили в компоненты React и делать что-то не только функциональным, но и красивым. 😁
Итак, теперь у нас есть пара вещей и основы того, как настроить Webpack, некоторые идеи по Babel (который сам по себе зверь, который нужно приручить) и как добавлять загрузчики. для увеличения функциональности.
Это начало прекрасных отношений. Процессы сборки могут быть пугающими, но если у вас есть прочная основа и вы знаете, как ее расширить, вы можете прекрасно ладить.
Если у вас есть дополнительные ресурсы или вы видите проблему с этим руководством, напишите мне в комментариях. Я также в твиттере @GrantGlidewell.
