Джефф Льюис (последнее обновление: 28.10.2018)
Что такое Webpack?
Webpack - это один файл конфигурации (webpack.config.js), который мы создаем и настраиваем в соответствии с тем, как был создан ваш проект.
Webpack - это сборщик модулей, что означает, что он объединяет ваши файлы React (index.jsx, App.jsx и файлы компонентов), index.html и файлы CSS (модули с зависимостями) в статические ресурсы. Эти статические ресурсы, скорее всего, содержат код (JSX, ES6, ES7, ES8 и т. Д.), Который браузеры не могут прочитать. Вот где появляется Вавилон.
Почему браузер не может просто прочитать файлы?
Люди получают доступ к вашему веб-приложению через браузер, но не все браузеры одинаковы. У людей есть выбор использовать такие браузеры, как Safari, Google Chrome, Firefox, Opera или Microsoft Edge. Легенда гласит, что некоторые пещерные люди до сих пор используют различные версии Internet Explorer. Я не собираюсь показывать пальцем, но * кашляет * корпоративная Америка * кашляет *. Эти различные браузеры не принадлежат к одной и той же версии или даже к одному и тому же выпуску. Вот тут-то и появляется Вавилон.
Что такое Вавилон?
Babel - это также один файл конфигурации (.babelrc), который мы создаем и настраиваем в соответствии с тем, как создавался ваш проект. Способ связи с подавляющим большинством браузеров (для тех, кто все еще использует Netscape Navigator, GoFundMe был настроен после этой трагедии) - через Webpack. Webpack принимает все файлы вашего проекта, создает статические ресурсы, а затем Babel переносит эти файлы для чтения в подавляющем большинстве браузеров. Это означает, что ваши файлы ES6, ES7, ES8 и React преобразуются в код ES5 (то, что может читать подавляющее большинство браузеров).
Как мы используем Webpack?
В этом руководстве мы будем использовать Webpack 4 и Babel с интерфейсом React. Это руководство только для Webpack и Babel, поэтому мы не будем углубляться в React.
1. Настройка Webpack + Babel
А. Инициализировать репозиторий:
Если вы еще этого не сделали, инициализируйте свой проект через терминал с помощью NPM. Это создаст package.json, в который будут добавлены наши зависимости разработчика. Если вы уже это сделали, можете пропустить эту часть A.
npm init
Б. NPM Зависимости разработчиков: Настройка:
Вот все необходимые и последние версии зависимостей Webpack и Babel, чтобы все работало по состоянию на середину 2018 года. Чтобы узнать, почему и что делает каждая зависимость, ознакомьтесь с частью C.
Примечание. Мы будем использовать Babel 7, поэтому в качестве префикса для зависимостей babel используется символ @. @babel/
различает эти зависимости как Пакеты с заданной областью, что означает, что префиксом пакета является учетная запись. Раньше любой мог просто назвать пакет babel-hacker-package
, и кто-то подумал бы, что Бабель создал этот пакет. В Babel 7 Scoped Package существует единое соглашение об именах, и больше не будет проблем со случайным или преднамеренным кражей имен.
Примечание. Если вы используете Node.js версии 5 или выше, вам не нужно включать - сохраните, поскольку теперь он автоматически сохраняется в ваших зависимостях. Чтобы узнать, какую версию Node.js вы используете, введите в терминале node -v.
Webpack:
npm install webpack webpack-cli webpack-dev-server --save-dev
Babel:
npm install @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-react @babel/register --save-dev
Загрузчики JS / JSX и CSS:
npm install babel-loader style-loader css-loader
C. Объяснение каждой зависимости Dev:
Я провел небольшое исследование доступных зависимостей для Webpack и Babel. Ниже приводится краткое объяснение того, что они делают.
Webpack:
- webpack (компилятор / сборщик Webpack) (Ссылка NPM)
- webpack-cli (интерфейс командной строки, который обменивается данными с компилятором / сборщиком Webpack) (Ссылка NPM)
- webpack-dev-server (только для разработки. Создает сервер разработки) (NPM Link)
Babel:
- @ babel / core (Babel Transpiler) (Ссылка NPM)
- @ babel / cli (интерфейс командной строки, который связывается с Babel Transpiler) (NPM Link)
- @ babel / register (Транспилирует файлы, требуемые Node.js, с расширениями .es6, .es, .jsx и .js) (Ссылка NPM)
- @ babel / preset-env (файлы переносятся с использованием ES6, ES7 и ES8. То же, что и babel-preset-latest, который включает babel-preset-es2015, babel-preset-es2016 и babel- preset-es2017. Однако babel-preset-latest устарел и заменен babel-preset-env, поэтому мы используем babel-preset-env. Это пакет всех пакетов) (NPM Link)
- @ babel / preset-react (Транспилирует файлы с помощью React. Это необходимо, если ваш проект использует React) (NPM Link)
Погрузчики:
- babel-loader (загружает файлы в Webpack для того, чтобы Babel транспилировал) (NPM Link)
- style-loader (Добавить экспорт модуля как стиль в DOM. Необходимо при использовании css-loader, sass-loader или less-loader) (Ссылка NPM)
- css-loader (загружает файл CSS с разрешенным импортом и возвращает код CSS) (Ссылка NPM)
2. Настройка Babel (.babelrc)
В корне папки вашего проекта создайте файл .babelrc
.
A. Создайте базовую файловую структуру Babel:
{ "presets": [] }
Б. Добавить предустановки Babel:
Теперь добавим те зависимости, которые были установлены ранее:
- @ babel / preset-env (файлы ES6, ES7 и ES8)
- @ babel / preset-react (файлы React)
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
Файл Babel настроен и завершен. Теперь перейдем к файлу конфигурации Webpack.
3. Настройка Webpack (webpack.config.js)
В корне папки вашего проекта, там же, где должен находиться ваш .babelrc, создайте файл webpack.config.js. По сравнению с файлом конфигурации Babel, этот файл отличается, и нам нужны следующие пакеты, которые мы установили. Примечание. Путь является частью Node.js, поэтому вам не нужно устанавливать никаких дополнительных пакетов, если у вас установлен Node.js.
A. Что делает каждая зависимость Dev:
- путь (включен в Node.js. Создает динамический путь ввода / вывода из корневого каталога) (Документация)
- html-webpack-plugin (автоматически создает html-файл из вашего шаблона index.html для обслуживания вашего приложения) (NPM Link)
- babel-register (позволяет использовать ES6 + с файлами Node.js) (NPM Link)
Б. Базовая файловая структура Webpack:
Примечание. Мы будем добавлять в эту файловую структуру от B до F, поэтому, если вы хотите получить готовый файл Webpack, прокрутите вниз до «F. Опции + Инструменты разработки Webpack ».
// Imports: Dependencies const path = require('path'); require("babel-register"); // Webpack Configuration const config = { // Entry entry: {'PATH TO YOUR INDEX.JSX FILE'}, // Output output: { path: path.resolve(__dirname, 'PATH TO SEND BUNDLED/TRANSPILED CODE'), filename: 'bundle.js', }, // Loaders module: { rules : [ // JavaScript/JSX Files { test: /\.jsx$/, exclude: /node_modules/, use: ['babel-loader'], }, // CSS Files { test: /\.css$/, use: ['style-loader', 'css-loader'], } ] }, // Plugins plugins: [], }; // Exports module.exports = config;
С. Запись:
Entry - это первый файл, с которого должен запускаться Webpack. Для приложений React мы хотим начать с файла index.js. С моей файловой структурой точка входа будет выглядеть так:
entry: {'./client/src/index.jsx'}
Д. Вывод:
Выходные данные - это то, куда будут отправлены файлы, переданные Babel и скомпилированные из Webpack, поэтому мы выведем наш файл как bundle.js в папку «dist» или дистрибутив.
path: path.resolve(__dirname, './client/dist'), filename: 'bundle.js'
E. Погрузчики:
Загрузчики - это то, как ваши статические ресурсы загружаются в Webpack. Если вы используете файлы .js вместо файлов .jsx, вы можете исправить конфигурацию, заменив /\.jsx$/ на /\.js$/ в «test», как показано ниже.
{ test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] }
Если вы используете файлы .sass вместо файлов .css, вы можете исправить конфигурацию, заменив /\.css$/ на /\.sass$/ в поле «test», как показано ниже. Вам нужно будет установить дополнительные зависимости разработчика, в зависимости от типов ваших файлов.
{ test: /\.sass$/, use: ['style-loader', 'sass-loader'] }
Ф. Плагины:
Плагин html-webpack-plugin создает для вас файл index.html, если его нет. Вот пример того, как теперь будет выглядеть файловая структура с файлом плагина (изменения выделены жирным шрифтом):
- html-webpack-plugin (плагин автоматически создает HTML-файлы для обслуживания ваших пакетов) (NPM Link)
// Imports const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin') require("babel-register"); // Webpack Configuration const config = { // Entry entry: {'./client/src/index.js'}, // Output output: { path: path.resolve(__dirname, './client/dist'), filename: 'bundle.js', }, // Loaders module: { rules : [ // JavaScript/JSX Files { test: /\.jsx$/, exclude: /node_modules/, use: ['babel-loader'], }, // CSS Files { test: /\.css$/, use: ['style-loader', 'css-loader'], } ] }, // Plugins plugins: [ new htmlWebpackPlugin({ template: './client/dist/index.html', filename: 'index.html', hash: true }) ], }; // Exports module.exports = config;
- шаблон: указывает путь, по которому вы хотите создать файл.
- filename: Указывает, как должен называться файл, в котором index.html является стандартным.
- hash: значение true или false, в котором хешируется исходный URL-адрес вашего приложения.
Ф. Опции + Инструменты разработки Webpack:
Ниже мы собираемся добавить watch
Webpack Option и source-map
Webpack Devtool в наш файл конфигурации Webpack.
- смотреть (Webpack продолжит следить за изменениями в любом из разрешенных файлов)
- source-map (была ли когда-либо отладка по времени, и строка в сообщении об ошибке не является строкой в вашем коде? Source Map предоставит подробную отладку, добавив метаинформацию для консоли браузера)
// Imports const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') require("babel-register"); // Webpack Configuration const config = { // Entry entry: {'./client/src/index.js'}, // Output output: { path: path.resolve(__dirname, './client/dist'), filename: 'bundle.js' }, // Loaders module: { rules : [ // JavaScript/JSX Files { test: /\.jsx$/, exclude: /node_modules/, use: ['babel-loader'] }, // CSS Files { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, // Plugins plugins: [ new HtmlWebpackPlugin({ template: './client/dist/index.html', filename: 'index.html', hash: true }) ] // OPTIONAL // Reload On File Change watch: true, // Development Tools (Map Errors To Source File) devtool 'source-map', }; // Exports module.exports = config;
Готово, вы, Webpack и Babel Prodigy.
Вот и все! Теперь вы знаете, как создавать. Теперь вы знаете, как создавать собственные файлы конфигурации Webpack 4 и Babel 7 для обслуживания вашего современного кода.
Никто не идеален. Если вы обнаружили какие-либо ошибки, хотите предложить улучшения или расширить тему, отправьте мне сообщение. Я обязательно добавлю какие-либо улучшения или исправлю любые проблемы.